点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)
效果：
思路：
利用setInterval计时器进行运动，offsetWidth实现宽度的变动，在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动。
代码：
<head runat="server">
<title></title>
<style type="text/css">
div
{
width: 100px;
height: 50px;
background: #0000FF;
margin: 10px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; //给买个DIV做个标记，用以关闭相应DIV的定时器
oDiv[i].onmouseover = function () {
move(this, 400); //给定时器输出参数
}
oDiv[i].onmouseout = function () {
move(this, 100);
}
}
};
function move(div, end) {
clearInterval(div.timer);
div.timer = setInterval(function () {
var speed = (end - div.offsetWidth) / 5; //（终点-要走的宽度）/缩放系数=DIV移动的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //小数取整，也就是进位取整
if (div.offsetWidth == end) { //当到达终点时关闭计时器
clearInterval(div.timer);
}
else {
div.style.width = div.offsetWidth + speed + 'px'; //移动DIV的宽度
}
}, 30)
}
</script>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)的更多相关文章
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- js实现小功能 动态赋值
- 常用小功能js函数-函数防抖
函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...
- js/jq 小功能函数
1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- js小功能记录
个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...
随机推荐
- [标准性文档]WEB应用安全验证标准
这是根据OWASP ASVS翻译过来的,可作为WEB应用开发的验收标准(未包含具体细节),值得注意的是,验收标准并非越严格越好,应根据企业自身的业务需求判定. WEB应用安全验证标准 安全验证等级的定 ...
- Win32 error code message
http://fit.c2.com/fit/files/LispPlatform/lisp/clisp-2.28/src/errwin32.d # Calls a function, passing ...
- How do I find what queries were executing in a SQL memory dump?-----stack
https://blogs.msdn.microsoft.com/askjay/2010/10/03/how-do-i-find-what-queries-were-executing-in-a-s ...
- Java 的BigDecimal
原文:http://blog.csdn.net/diyu122222/article/details/76887382 decimal decimal(18,0) 18是定点精度,0是小数位数. de ...
- QT5的程序打包发布（将QT5的工程项目打包成一个exe程序）
最近,在学习QT5的过程中,想尝试着把自己写的工程程序给打包发布出来,在任何一台windows系统都能运行,这样就不会限于电脑需不需要安装QT安装包了. 首先,先介绍自己使用的环境.我使用的QT版本是 ...
- window环境下备份与恢复(实际操作)
C:\Documents and Settings\xuzhengzhu>sqlplus /nolog SQL*Plus: Release 10.2.0.1.0 - Production on ...
- tee -a /var/log/jd.log
原文: http://man.linuxde.net/tee --------------------------------------------------------------------- ...
- tomcat在ubuntu中设置开机启动
#!/bin/bash export JAVA_HOME=/usr/lib/jdk/jdk1.7.0_72 WEBROOT_PATH=/home/zhengze/workspace WEBSERVER ...
- 解决Cocos2d-x编译错误： 无法打开 源 文件 "extensions/ExtensionExport.h"
#include "base/ccMacros.h"
- 算法笔记_091:蓝桥杯练习 递推求值（Java）
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 已知递推公式: F(n, 1)=F(n-1, 2) + 2F(n-3, 1) + 5, F(n, 2)=F(n-1, 1) + 3F(n- ...