Javascript 匀速运动——应用案例：网站常用功能分享到
网站上会经常用到Javascript 中的运动，这次与大家分享一下一些运动的基本应用 。 方便大家在开发中能够直接使用。
代码简单易懂，适用于初学者。最后会一步一步整理出一套自己的运动框架。
应用案例效果图：
鼠标移动到分享上 ，左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到 很实用，下面看看代码是如何实现的。
<style type="text/css">
#div1 {
width: 150px;
height: 200px;
background: green;
position: absolute;
left: -150px;
}
#div1 span {
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: blue;
right: -20px;
top: 70px;
}
</style>
<body>
<div id="div1">
<span>
分享到
</span>
</div>
</body>
以下是Javascript 代码
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){
startMove(0);
}; oDiv.onmouseout=function(){
startMove(-150);
};
} var time=null; function startMove(iTraget){
var oDiv=document.getElementById("div1"); clearInterval(time); time=setInterval(function(){
var speed=0; if(oDiv.offsetLeft>iTraget){
speed=-10;
}else{
speed=10;
} if(oDiv.offsetLeft==iTraget){
clearInterval(time);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
思路：
样式中初始的left是-150 这样div就是缩在里面，给0 就会显示出来。 那么我们只要变动这个值就可以了
startMove 中的参数 iTarget 是目标点 ，表示到哪个目标点会停下来。
控制speed 的大小 就能控制运动的快慢。如果达到目标点 就停止定时器 。
规律：
* 假设
* left:30 iTarget:300 得出 往右 为正
* left:600 iTarget:50 得出 往左 为负*
* 通过当前位置left 与目标点的 关系 iTarget 推断出 速度的正负
注意： 一上来就要关了定时器，因为是每次移动到分享到，都会开个定时器，开的越多相对来说速度就越快，因为同时会有多个定时器执行。
所以每次要保证一个定时器工作。
遵循：函数功能一样，参数越少越好的原则 ，所以根据上面的规律把speed 并不是作为参数传入。
举个生活中的例子：你打车，告诉出租车司机已100码的速度到哪哪哪，一般是不可能的吧。打车你不可能告诉师傅你要跑多快
所以程序也是一样的，这里就把速度这个传参去掉了。
当然现在的这个运动框架还会有许多问题，在之后会陆续解决。
Javascript 匀速运动——应用案例：网站常用功能分享到的更多相关文章
- web网站常用功能测试点总结
目录 一.输入框 二.搜索功能 三.添加.修改功能 四.删除功能 五.注册.登录模块 六.上传图片测试 七.查询结果列表 八.返回键检查 九.回车键检查 十.刷新键检查 十一.直接URL链接检查 十二 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- WebStorm 常用功能的使用技巧分享
WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...
- 通过servlet实现几个网站常用的功能
帮朋友写的小程序,由于功能比较简单所以就偷懒只使用了Servlet 一.JSP页面部分(这个部分的设置比较粗糙,主要是为了查看功能能否实现,如果需要向用户展示还得修饰一下) 1)功能页(所有需要后台实 ...
- JavaScript 常用功能总结
小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...
- 分享几个社交类网站常用并且也是最好用的jquery类库
官网都有详细的文档说明,大家自行百度谷歌哈! artZoom:常用于微博,支持图片放大缩小旋转 AutoComplete:自动完成 BackTop:当内容多时出现“返回顶部” CFUpload:批量上 ...
- Wireshark学习笔记（一）常用功能案例和技巧
@ 目录 常用功能 1.统计->捕获属性 2.统计->协议分级 3.过滤包Apply as filter E1:过滤出特定序号的包 E2:过滤出某IP地址或端口 E3:导出php文件 E4 ...
- Nginx实战部署常用功能演示(超详细版)，绝对给力~~~
前言 上次分享了一些开发过程中常用的功能,但如果到真实环境中,其实还需要一些额外的配置,比如说跨域.缓存.配置SSL证书.高可用等,老规矩,还是挑几个平时比较常用的进行演示分享.上篇详见Nginx超详 ...
- js实现第一次打开网页弹出指定窗口（常用功能封装很好用）
js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...
随机推荐
- servlet+ajax+json字符串后台传入，前端解析并把数据循环填入表格实例
写在前面:1.源代码来源于博客http://blog.sina.com.cn/u/2904067371 ,在此基础上对于前端代码稍作更改,把传过来的数据解析并传入表格2.json解析,用eval()3 ...
- Qt for Windows：Qt 5.4.0 MinGW 静态编译版本制作 (转)
大致流程: 1.安装Qt(源码版)以及其他必要的环境 2.编译/安装 3.配置 4.使用 ----------正文分割线---------- 1.安装Qt(源码版) 1.1 下载Qt(两个地址二选一即 ...
- 学习java的视频资源（尚学堂）（比较老旧，但是还是挺好用）
本人新手,转入IT,一开始在学校的时候看过尚学堂 马士兵讲过的java基础视频教程,这次深入学习呢,就从百度云盘找了一整套的视频资源.之后越深入的学习呢,发现这些视频资源VeryCD上都发布了,地址 ...
- php将unicode编码转为utf-8方法
介绍 在前端开发中,为了让中文在不同的环境下都能很好的显示,一般是将中文转化为unicode格式,即\u4f60,比如:"你好啊"的 unicode编码为"\u4f60\ ...
- JavaScript中的Math.ceil()、Math.round()、Math.floor()
1. Math.ceil():向上取整(指取大于该浮点数的最小整数) 2. Math.round():四舍五入取整(注意:当该浮点数距离两端整数一样时,取较大的那个整数,如Math.round(-1. ...
- 前端开发面试题收集 JS
前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...
- bugfree搭建
- jacob 操作word转pdf
项目需要对上传的word及pdf进行在线预览,因基于jquery的pdf插件,很方面实现在线预览,而word实现在线预览费劲不少,于是想到在进行上传处理时,直接将word转成pdf,在预览时直接预览p ...
- /dev/console,/dev/null,/dev/tty
UNIX和Linux中比较重要的三个设备文件是:/dev/console,/dev/tty和/dev/null. 0 : /dev/console 这个设备代表的是系统控制台,错误信息和诊断信息通常 ...
- 文本导出到pdf文件
程序中数据导出是经常有的需求,今天学习把文本导出到pdf文件.主要是用QPrinter,QPainter TextEditToPdf::TextEditToPdf(QWidget *parent, Q ...