点滴积累【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 [ ...
随机推荐
- 利用Visual Studio Natvis 框架简化C++的变量调试工作
相信用C++开发过UI界面的程序员都对其变量调试工作头痛不已,由于复杂的继承关系,要查看到某个变量往往需要一系列的层层深入的点击,如下图就是查看TextBox的Text的例子: 为了查看Text属性, ...
- 【shiro】关于shiro匹配URL的小用法
今天涉及到这个地方 1.登录请求需要带着username和password一起过去,这样的话发出的请求就是:http://localhost:8080/wxSecond/welcome/login.h ...
- 如何在sublime3项目设置中设置python模块的搜索路径？ImportError: No module named *的解决办法
问题:之前使用pycharm,用的挺溜,但是电脑配置实在不争气,pycharm启动久了,耗去大量内存,导致运行起来越来越慢,于是转向使用sublime text. 把项目从pycharm切换到subl ...
- 事务内执行sql修复的简易模板
-- ============================================= -- Script Template -- ============================= ...
- 微软对外披露两个0day漏洞详情
微软近日对外披露了两个0day漏洞详情,其中一个漏洞存在Adobe阅读器中,可被利用导致任意代码执行:另一个漏洞则允许任意代码在Windows kernel内存中提权执行. 微软称由于该漏洞利用目前还 ...
- WAF攻击与防御
背景 对于腾讯的业务来说,有两个方面决定着WAF能否发挥效果,一个是合适处理海量流量的架构,另一个关键因素则是规则系统.架构决定着WAF能否承受住海量流量的挑战,这个在之前的篇章中简单介绍过(详情见主 ...
- http://www.cnblogs.com/carekee/articles/1854674.html
http://www.cnblogs.com/carekee/articles/1854674.html http://www.cnblogs.com/xdp-gacl/p/3926848.html
- C# 继承实现父类方法、重写、重载
继承是派生类(子类)去实现(重写<override>.重构<new>)基类(父类)的方法或属性.从而获取在派生类中要实现的功能. 子类调用父类构造方法,在父类中有个实现姓名和年 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-为什么无法打开官方范例的项目，打开tszip文件时提示尝试越过结尾怎么办
打开新的解决方案,找到tszip文件 提示错误Advanced Setting时越过结尾 到这里一般VS会卡死 但是我们已经可以得到解压出来的文件夹,其中包含PLC的完整项目文件夹,可以新 ...
- 优化SQL Server的内存占用之执行缓存
在论坛上常见有朋友抱怨,说SQL Server太吃内存了.这里笔者根据经验简单介绍一下内存相关的调优知识 首先说明一下SQL Server内存占用由哪几部分组成.SQL Server占用的内存主要 ...