点滴积累【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 [ ...
随机推荐
- CentOS 6.9/Ubuntu 16.04搭建OpenVPN服务器以及客户端的使用
说明: 1.发现一个很奇怪的现象,CentOS和Ubuntu有着对用户不同的管理理念,比如CentOS中安装一切软件都是以root优先(su -),而Ubuntu则以当前用户优先,安装软件以sudo开 ...
- [典型漏洞分享]YS的防暴力破解设计存在缺陷
YS使用的防暴力破解机制存在缺陷,该缺陷可被用于暴力破解其它用户密码[高] 问题描述: YS在用户登录页面设置了验证码机制,当用户输入密码错误次数达到3次时,再次登录需要验证码以防止攻击者进行暴力破解 ...
- ylbtech-LanguageSamples-Indexers_2(索引器)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Indexers_2(索引器) 1.A,示例(Sample) 返回顶部 Indexers ...
- 各种软核处理器二进制文件FPGA初始化文件生成程序
不管是MIPS, Nios II, MicroBlaze, MSP430, 8051, OpenRISC, OpenSPARC, LEON2/LEON3等等软核处理器,在FPGA上实现的时候我们通常需 ...
- C语言素数
求1-10000之间的素数,并打印出来. 使用了sbrk和brk函数,采用直接操作内存的方式,尽量减少循环次数,每次进行素数判断仅与之前的素数进行相除.该代码并不健壮,仅作练习用. #include ...
- 将EC2的Sql Server 计划任务的方式备份到s3上
编写个powershell脚本 $server = '.' $database = 'databaseName' $s3Bucket = 's3bucket' $backupPath = 'D:\Ba ...
- [Android Pro] 注册 Google Play 开发者帐户
官网地址: https://support.google.com/googleplay/android-developer/answer/6112435?hl=zh-Hans 博客地址: http:/ ...
- 帮助更语义化的显示时间的jQuery插件 - tidyTime.js
来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15 显示成 ...
- Win7如何删除家庭组
发表于 2010-07-15 11:38:06 [YY团]Win7家庭组不能正常使用的解决办法 只是把近期碰到的一个小毛病的解决方案共享一下罢了,估计碰到这问题的人不会很多-- 表现是家庭组不能正常访 ...
- node了解
学习资料 廖雪峰的官方网站—node.js Node.js 中文网:http://nodejs.cn/ Node.js 教程(菜鸟教程):http://www.runoob.com/nodejs/no ...