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 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- yum-plugin-priroites这个插件的一个文件。
yum源优先级的一个文件.是yum-plugin-priroites这个插件的一个文件.用来给yum源分优先级的.比如你在centos下有centos,epel,rpmfusion三个yum源.三个y ...
- iOS彩票项目--第五天，新特性引导页的封装、返回按钮的自定义、导航控制器的滑动返回以及自定义滑动返回功能
一.上次实现了在AppDelegate中通过判断app版本决定是否进入新特性页面,今天将AppDelegate中的一坨进行了封装.将self.window的根控制器到底应该为新特性界面,还是主页面,封 ...
- javascript-限制文本框只输入数字
使用onInput()事件 oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过 ...
- Ajax轮询——“定时的通过Ajax查询服务端”
Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...
- openfire User Service 和删除分组的方法
z4PstKlN 服务器-> 系统属性 plugin.userservice.enabled 值为 true 增加用户 9090/plugins/userService/userservice? ...
- 关于Cocos2d-x的粒子系统
1.cocos2d-x有一些自带的粒子效果,以后可以用到.当然,也可以自己定义一些粒子,不过要定义的话,虽然可以用cpp文件自己写,但是没有可视化的调节,还要设定各种奇怪的参数,是非常困难的.可以用一 ...
- spring 优点
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...
- hunnu--11547--你的组合数学学得怎样？
你的组合数学学得怎样? Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit users: ...
- while(scanf("%d",&n)!=EOF)与while(cin>>n)
我们知道scanf函数是C语言里面的,其返回值是,被输入函数成功赋值的变量个数.针对于int counts = scanf("%d",&n);来说如果赋值成功那么其返回值 ...
- php将汉字转换为拼音和得到词语首字母(一)
<?php /** * 修复二分法查找方法 * 汉字拼音首字母工具类 * 注: 英文的字串:不变返回(包括数字) eg .abc123 => abc123 * 中文字符串:返回拼音首字符 ...