<!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. ORA-12504 warning in PHP

    <?php $conn = oci_connect('proekt', 'proekt1', 'localhost:1521'); $stid = oci_parse($conn, " ...

  2. DataGridView：根据条件改变单元格的颜色

    根据条件改变DataGridView行的颜色可以使用RowPrePaint事件. 示例程序界面如下: 示例程序代码如下: using System; using System.Collections. ...

  3. SQL Server查询某个字段存在哪些表中

    一.查询SQL Server中所有的表 SQL语句:SELECT * FROM sys.tables name列表示所有的表名. 二.查询SQL Server中所有的列 SQL语句:SELECT * ...

  4. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  5. Python 字符串切片

    #-*- coding:utf-8 -*- #字符串切片 names = "abcdefgh" ''' 切片语法 names[起始位置:终止位置:步长] 起始位置:即字符串的下标, ...

  6. Windoows窗口程序六

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  7. USB2.0学习笔记连载（二）：USB基础知识简介

    USB接口分为USB A型.USB B型.USBmini型.USBmicro型.USB3.0其中每种都有相应的插座和插头. 图1 图2 上图是USBA型接口,图1为插座,图2为插头.插座指向下行方向, ...

  8. VMware ESXi 不支持NTFS格式的USB外接硬盘

    本来想搞直通USB外接大容量硬盘(希捷Seagate Backup+ Hub WH 8T),实现在同一部ESXi下,直接将NAS的数据转移到外接硬盘.结果发现虚拟机下的win server系统识别不了 ...

  9. TensorFlow基础笔记(13) tf.name_scope tf.variable_scope学习

    转载http://blog.csdn.net/jerr__y/article/details/60877873 1. 首先看看比较简单的 tf.name_scope(‘scope_name’). tf ...

  10. 在windows下编译x264

    最近因为各种原因,对流媒体的学习,突然中断在了编码这块.今天难得静下心来,从新拿起了代码. 对encode这边,因为之前虽然也接触了,也找了两个例子,但目前还没真正开始,所以先从编译x264这个库开始 ...