点滴积累【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 [ ...
随机推荐
- MDD：使用模型驱动开发方式进行快速开发（多图预警）
相信很多人跟我一样,不喜欢数据展示.列表分页.数据的增.删.改.查,这种简单又烦琐的搬砖活. 所以网上出现很多开源的代码生成工具,在多年前我也写过,根据模版生成简单的View.Action.Servi ...
- centos安装lnmp
安装ssh yum install openssh-server ====================== 查看SSH是否安装. ◆输入命令:rpm -qa | grep ssh 注:若没安装SS ...
- Sysfs文件系统与Linux设备模型
转:http://www.360doc.com/content/11/1218/16/1299815_173168170.shtml sysfs把连接在系统上的设备和总线组织成为一个分级的目录及文件, ...
- css/js(工作中遇到的问题)-5
后端换行符处理 问题描述 // Windows new line support (CR+LF, \r\n) str = str.replace(/\r\n/g, "\n"); 遍 ...
- [Java基础] Java对象内存结构
转载地址:http://www.importnew.com/1305.html 原文于2008年11月13日 发表, 2008年12月18日更新:这里还有一篇关于Java的Sizeof运算符的实用库的 ...
- linux gcc升级备忘录
1. 拉包 sudo wget http://mirrors.opencas.org/gnu/gcc/gcc-6.3.0/gcc-6.3.0.tar.bz2 #如果以上给出的镜像不可用,也可以是使用h ...
- jenkins平台通过maven方式使用sonar报大量关于html/css/js的错误解决办法
1.如果项目只关注java的源代码扫描,可以在sonar上把检查html.css.js的插件卸载,让后重启sonar避免不需要检查的内容报错误
- WSDL-学习总结
1.什么是WSDL 是一种使用 XML 编写的文档.这种文档可描述某个 Web service.它可规定服务的位置,以及此服务提供的操作(或方法). 2.WSDL文档结构: <binding&g ...
- 捕获和记录SQL Server中发生的死锁
经带在论坛上看到有人在问怎么捕获和记录死锁信息,在这里,我将自己的一些心得贡献出来,与大家分享,也请各位指正. 我们知道,可以使用SQL Server自带的Profiler工具来跟踪死锁信息.但这种方 ...
- nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口
前端同学用nginx搭建自己的web服务器,后台程序专门部署在一台服务器上(我们之前公司就有三套环境,开发/测试/生产),这样做的好处是 1.前端代码基本都是静态文件,重启一次很快,也就几秒钟时间. ...