<!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. mongo 内存限制wiredTigerCacheSizeGB = 10

    [root@iZ2zed126f44v90yv59ht3Z rabbitmq]# cat /usr/local/mongodb/mongodb.confport = 27017dbpath = /us ...

  2. BeamNG.drive物理引擎评鉴

    BeamNG.drive是一款由BeamNG公司开发并于2013年首次发布的软体物理模拟游戏.作为模拟游戏,特别是物理模拟的粉丝,我早早就开始使用BeamNG.drive.我立即对崩溃的准确性和细节印 ...

  3. [ES6]探究数据绑定之Proxy

    知识储备 Proxy 方式实现数据绑定中涉及到 Proxy.Reflect.Set.Map 和 WeakMap,这些都是 ES6 的新特性. Proxy Proxy 对象代理,在目标对象之前架设一层拦 ...

  4. xshell用ssh连接VMware中的ubuntu

    SSH分客户端openssh-client和openssh-server如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则sudo apt-ge ...

  5. C# json字符串格式

    [{\"MenId\":\"1\",\"MenName\":\"内容管理\",\"ParentId\" ...

  6. sparkR 跑通的函数

    spark1.4.0的sparkR的思路:用spark从大数据集中抽取小数据(sparkR的DataFrame),然后到R里分析(DataFrame). 这两个DataFrame是不同的,前者是分布式 ...

  7. 移动H5功能设计反思 测试用例总结

    一.线上页面滑动流畅性测试 1.减少长动画效果(影响流畅) 2.是否自动跳转或者还是让用户自己操作跳转需要推敲 二.buttom和页面滑动的选择(优劣) 部分手机本身就会滑动不灵敏,大部分时候其实用b ...

  8. 搭建Grunt集成环境开发SASS

    先行下载安装Ruby和SASS 再下载并安装node.js,已经集成了NPM 命令行查看是否安装成功 node -v npm -v 命令行安装grunt npm install -g grunt-cl ...

  9. Omnigraffle快捷键

    cmd+shift+. 和 cmd+shift+,  放大缩小 按住z点击鼠标是放大, z+Option是缩小 按住command双指推移 缩放 按住command,旋转物体 按住 option缩放 ...

  10. 【转】【Java/Android】Toast使用方法大全

    Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于 一些帮助 / 提示.Toast 最常 ...