<!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. linux性能评估与分析工具

    linux是一个开源系统,其内核负责管理系统的进程,内存,设备驱动程序,文件和网络系统, 决定着系统的性能和稳定性.由于内核源码很容易获取,任何人都可以将自己认为优秀的代码 加入到其中.linux默认 ...

  2. Homebrew 的安装方法(官方的方法老师安装失败) 第三方

    官网:http://brew.sh/index_zh-cn.html 安装方式见 官网,在shell里执行如下语句,如下:ruby -e "$(curl -fsSL https://raw. ...

  3. CodeIgniter(3.1.4)框架中-使用多个公共控制器

    项目目录结构: 在core/MY_Controller.php文件下: <?php /** * Class MY_Controller * 自定义控制器 */ class MY_Controll ...

  4. Mac中Java 配置maven及阿里云镜像

    一:配置maven 1.下载maven,选择Binary tar.gz,解压拷贝到目录/usr/local/ 1 https://maven.apache.org/download.cgi 2.配置系 ...

  5. CSS实现圆角六色渐变自适应按钮

    Css代码 .g_a{display:-moz-inline-stack; display:inline-block; border-bottom:1px solid #cccccc; border- ...

  6. altium designer应用技巧---cyclone IV代芯片底部焊盘问题

    首先对于 altera 公司的FPGA芯片来讲,在cyclone III代以上,芯片的底部增加了一 个焊盘,很多工程师往往以为是散热用,其实不然,底部焊盘需要接地(altera手册上面 明确规定,Th ...

  7. 第二百九十一节,RabbitMQ多设备消息队列-安装与简介

    RabbitMQ多设备消息队列-安装与简介 RabbitMQ简介 解释RabbitMQ,就不得不提到AMQP(Advanced Message Queuing Protocol)协议. AMQP协议是 ...

  8. 单精度浮点数(float)加法计算出错

    场景: 一个float型的变量赋值1170601,加上19000000,结果出现错误. 原因: float占用4个字节(32位)存储空间,包括符号位1位,阶码位8位,尾数23位.浮点数精度与它的尾数有 ...

  9. e578. Setting the Clipping Area with a Shape

    This example demonstrates how to set a clipping area using a shape. The example sets an oval for the ...

  10. 平时收集的一些有关UED的团队和个人博客(转)

    UCDChina导航 前端团队 阿里巴巴 UED -- 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着. 阿里巴巴中国站UED -- 阿里巴巴中国站UED成立于1999年, ...