JS：“分享到”之类的悬浮框的运动原理（代码）
<!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：“分享到”之类的悬浮框的运动原理（代码）的更多相关文章
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
- 菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- （41）JS运动之右側中间悬浮框（对联悬浮框）
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- 使用DroneKit控制无人机
DroneKit-Python是一个用于控制无人机的Python库.DroneKit提供了用于控制无人机的API,其代码独立于飞控,单独运行在机载电脑(Companion Computer)或其他设备 ...
- Jenkins+ Xcode+ 蒲公英 实现IOS自动化打包和分发
Jenkins+ Xcode+ 蒲公英 实现IOS自动化打包和分发 直接入正题: Screen Shot 2015-09-18 at 16.56.20.png Mac上安装Jekins jekins下 ...
- 上手并过渡到PHP7（4）——取代fatal error的engine exceptions
上手并过渡到PHP7 取代fatal error的engine exceptions 泊学原文链接泊学代码秀视频 自从PHP 4以来,PHP的错误处理几乎就是一成不变的.只不过在PHP 5.0里添加了 ...
- eclipse的Maven项目pom.xml错误信息提示missingxxxjar解决方案
今天在学习的时候需要用到maven工程,当时找完所依赖的包的三要素就开始下载了,写完pom.xml需要一段时间下载这些jar包,就躺在一边等了.可能是笔记本有节能功能这个原因导致我醒来时断网发现满屏m ...
- 为什么要把session存入数据库
比如网易的通行证,一个session能进入很多的网易下的网站
- 什么是Apache ZooKeeper？
Apache ZooKeeper是由集群(节点组)使用的一种服务,用于在自身之间协调,并通过稳健的同步技术维护共享数据.ZooKeeper本身是一个分布式应用程序,为写入分布式应用程序提供服务. Zo ...
- linux -- Linux下的五个查找命令：grep、find、locate、whereis、which
1.grep grep(General Regular Expression Parser,通用规则表达式分析程序)是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. 它的使 ...
- PHP利用memcache缓存技术提高响应速度
PHP下memcache模块是一个高效的守护进程,提供用于内存缓存的过程式程序和面向对象的方便的接口,特别是对于设计动态web程序时减少对数据库的访问.memcache也提供用于通信对话(sessio ...
- <OC>OC新特征array literals
类似于java5提供的autoboxing功能.以前的写法:NSNumber * number = [NSNumber numberWithInt:1];NSArray * array = [NSAr ...
- VMware Host Agent服务不能正常启动
VMware Host Agent服务不能正常启动 原因及解决方法 一直都在用VMWare Server 2.0,其他都还好,就是隔三差五的会有些小问题,比如VMware Host Agent服务不能 ...