分享到JavaScript实现

心已赠人 2022-05-27 12:29 35阅读 0赞

**html代码**

<div id="parent">
        <span>分享到</span>
    </div>

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            #parent {
                width: 200px;
                height: 200px;
                background: #ccc;
                position: absolute;
                left: -200px;
            }
    
            #parent > span {
                position: absolute;
                left: 200px;
                background: pink;
                height: 80px;
                padding-top: 20px;
                top: 40px;
                width: 30px;
                text-align: center;
            }

**JS代码**

var oPar = document.getElementById("parent");
        var timer = null;
    
        oPar.onmouseover = function () {
            move1(this)
        };
        oPar.onmouseout = function () {
            move2(this)
        };
    
        function move1(obj) {
            clearInterval(timer);
            timer = setInterval(function () {
                var l = 0;
                l += 5;
                if (obj.offsetLeft >= 0) {
                    clearInterval(timer);
                } else {
                    obj.style.left = obj.offsetLeft + l + 'px';
                }
            }, 30)
        }
    
        function move2(obj) {
            clearInterval(timer);
            timer = setInterval(function () {
                var l = 0;
                l -= 5;
                if (obj.offsetLeft <= -200) {
                    clearInterval(timer);
                } else {
                    obj.style.left = obj.offsetLeft + l + 'px';
                }
            }, 30)
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript开发技巧分享

![370dfbc6763df800ab0501378a165c2d.jpeg][] 前言 JS是前端的核心，但有些使用技巧你还不一定知道。本文梳理了JS的41个技巧，帮

深碍√TFBOYSˉ_/ 2024年03月26日 17:25/ 0 赞/ 131 阅读

相关 javascript教程pdf(JavaScript教程资源分享)

搜狗问问-搜狗旗下最大互动问答社区 ![javascript教程pdf][javascript_pdf] 搜狗问问-搜狗旗下最大互动问答社区 [javascri

港控/mmm°/ 2023年09月25日 08:42/ 0 赞/ 41 阅读

相关 JavaScript实现一个链表结构源码分享

写在前面 > 刷题的时候看到一个关于链表的题目，写了一会发现写不出来，所以干脆就将链表的知识使用js重现一遍，这里写一个js实现的链表。链表结构介绍 > 没有写

落日映苍穹つ/ 2023年01月12日 04:26/ 0 赞/ 165 阅读

相关 38、JavaScript的运动----分享到侧边栏

1、“分享到”侧边栏 1.1 传三个参数的函数(运动对象的id,速度,目标点) <!DOCTYPE html> <html>

逃离我推掉我的手/ 2022年09月21日 13:06/ 0 赞/ 156 阅读

相关使用Javascript 实现分享到新浪微博 QQ 空间等

我们阅读博客的时候经常会用到这样功能，当然有时候也会想把自己的网站上也加入类似的分享功能，各大厂商已经给出了相应的API，点击一个按钮即可弹出窗口进入分享，我们事先可以设置一些

绝地灬酷狼/ 2022年06月13日 11:36/ 0 赞/ 526 阅读

相关 JavaScript代码编写分享到边侧栏

在很多的网站页面中或微信，微博都有分享到的功能。现在就编写一个简单的边侧栏。代码： <!DOCTYPE html> <html lang="en">

电玩女神/ 2022年06月07日 07:46/ 0 赞/ 215 阅读

相关微信js-sdk实现分享到朋友圈

微信接口文档地址：https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421141115&token=&lang=

骑猪看日落/ 2022年06月03日 08:11/ 0 赞/ 388 阅读

相关分享到JavaScript实现

html代码 <div id="parent"> <span>分享到</span> </div> css代码 {

心已赠人/ 2022年05月27日 12:29/ 0 赞/ 36 阅读

相关回到顶部JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

青旅半醒/ 2022年05月27日 12:29/ 0 赞/ 350 阅读

相关 JavaScript实现复制到剪贴板

实现方式直接通过插件形式即可，使用clipboard，该插件不到 4KB。快速使用 1.html <input value="www.xxx.com

妖狐艹你老母/ 2022年02月23日 02:54/ 0 赞/ 455 阅读