点滴积累【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 [ ...
随机推荐
- 定时任务框架-quartz 时间配置
quartz定时任务时间设置: 这些星号由左到右按顺序代表 : * * * * * * * 格式: [秒] [分] [小时] [日] [月] [周] [年] * 表示所有值. 例如:在分的字段上设置 ...
- EasyUI numbox输入框，金额格式化显示
1.HTML文件 <th id="sellerHopePrices_Th">委托方保留价:</th> <td id="sellerHopeP ...
- jquery next()方法
1.html代码 <!DOCTYPE html> <html> <head> <script type="text/javascript" ...
- http://www.blogjava.net/crespochen/archive/2011/04/22/348819.html
http://blog.csdn.net/supersky07/article/details/7407523 http://blog.csdn.net/cuker919/article/detail ...
- SQL Server 2008数据库备份与恢复
在这所要说的是“分离/附加”数据库: 1.分离数据库就是将某个数据库(如student_Mis)从SQL Server数据库列表中删除,使其不再被SQL Server管理和使用,但该数据库的文件(.M ...
- Spring Boot + Spring Data + Elasticsearch实例
Spring Boot + Spring Data + Elasticsearch实例 学习了:https://blog.csdn.net/huangshulang1234/article/detai ...
- const 与 指针
#include <iostream> using namespace std; int main() { // 第一种.使指针不能改动对象的值.注:此时指针能够指向另外的对象 int i ...
- spock spring 集成测试框架搭建心得
转载:http://blog.csdn.net/hankle_xu/article/details/77531880 spock测试框架,使用groovy作为脚本语言,开发出的测试脚本具有优良的阅读性 ...
- 解决游戏server负载上限问题
近期开发一款网络游戏,快到公布阶段.可是server的负载上限问题,这个该怎么处理呢? 如今有下面几种方案: 1.排队机制,像wow那样: 2.给当已满服打上一个"满"标记,不让玩 ...
- npm install 报错:node-pre-gyp ERR! 问题解决
npm install报错问题解决 问题: E:\CodeSpace\GitlabTest\desktop>npm install > lifeccp-desktop@1.1.9 post ...