<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>只传一个参数</title>

        <style type="text/css">

            .div {

                width: 100px;

                height: 100px;

                background-color: chartreuse;

                margin-top: 50px;

                position: absolute;

                left: -100px;

                top: 0;

                cursor: pointer;

            }

            .div span{

                display: block;

                width: 20px;

                height: 50px;

                position: absolute;

                right: -20px;

                top: 50%;

                margin-top: -25px;

                background-color: coral;

                font-size: 10px;

                padding: 5px;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

            }

        </style>

        <script type="text/javascript">

        window.onload = function(){

            var oDiv = document.getElementById('div');

            oDiv.onmouseover = function(){

                start(0);

            };

            oDiv.onmouseout = function(){

                start(-100);

            };

        };

            var timer = null;

            //功能一抹一样的函数，参数越少越好。

            function start(iTarget) {

                var oDiv = document.getElementById('div');

                clearInterval(timer);

                timer = setInterval(function() {

                    var speed = 0;

                    if(oDiv.offsetLeft>iTarget){

                        speed = -10;

                    }else{

                        speed = 10;

                    };

                    if(oDiv.offsetLeft == iTarget) {

                        clearInterval(timer);

                    }

                    else{

                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                    }

                }, 30)

            };

        </script>

    </head>

    <body>

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

    </body>

</html>

学习路径与来源：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

JS：“分享到”之类的悬浮框的运动原理（代码）的更多相关文章

  1. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  2. Echarts 的悬浮框tooltip显示自定义格式化

    最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...

  3. js实现页面悬浮框

    当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...

  4. js右侧悬浮框

    示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...

  5. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  6. （41）JS运动之右側中间悬浮框（对联悬浮框）

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. HTML5气泡悬浮框(已经加上完整文件)

    源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...

  8. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

  9. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

随机推荐

  1. Ubuntu通过apt-get安装指定版本和查询指定软件有多少个版本

    一.通过apt-get安装指定版本 apt-get install <<package name>>=<<version>> 二.查询指定软件有多少个版 ...

  2. [wifi]wifi模块的测试

    罗德斯瓦茨 非信令CMW100,信令CMW270,CMW500 支持多通道 具体如何多通道接相同的SSID,要看被测设备的变成 ublox是否支持非信令,需要check,信令和芯片没有关系,只和协议有 ...

  3. linux防火墙开关以及端口规则添加

    1. 重启后生效的 开启: chkconfig iptables on 关闭: chkconfig iptables off 2. 及时生效 开启: service iptables start 关闭 ...

  4. PHP无限极分类 - 2 - 无限极评论

    参考上一节: 结合ZUI前端框架,制作的无限极评论列表: 项目目录: 代码: <!DOCTYPE html> <html lang="en"> <he ...

  5. [mysql] MySQL Order By Rand()效率【转载】

    最近由于需要大概研究了一下MYSQL的随机抽取实现方法.举个例子,要从tablename表中随机提取一条记录,大家一般的写法就是:SELECT * FROM tablename ORDER BY RA ...

  6. WCF系列

    转自:1) http://www.cnblogs.com/zhili/p/WCFSummary.html 2)  http://www.cnblogs.com/artech/archive/2009/ ...

  7. 安装cx_Oracle 遇到的杂项问题

    1. 解决方法: 将xc用户添加进sudousers 2.安装VMware Tools 更新 http://pubs.vmware.com/vsphere-50/index.jsp?topic=%2F ...

  8. opencv实例二：缩放一张图片

    1.知识补充 const char*, char const*, char*const的区别 事实上这个概念谁都有只是三种声明方式非常相似: Bjarne在他的The C++ Programming ...

  9. [mysql] 先按某字段分组再取每组中前N条记录

    From: http://blog.chinaunix.net/uid-26729093-id-4294287.html 请参考:http://bbs.csdn.net/topics/33002126 ...

  10. JavaScript-事件冒泡简介及应用

    一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事 ...