点滴积累【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 [ ...
随机推荐
- enum don't allocate any memory
int main() { _asm{ mov edi,edi mov edi,edi } ,Green,Yellow}; _asm{ mov edi,edi mov edi,edi } Color c ...
- css/js(工作中遇到的问题)-6
页面resize方法 if(document.createEvent) { const event = document.createEvent ("HTMLEvents"); e ...
- SQL Server 2008数据库备份和还原（还原是必须有完整备份）
转自lwccc, SQLserver2008数据库备份和还原问题(还原是必须有完整备份) 首先,我要说明的是你必须拥有完整的数据库备份,下面的还原教程,才算有用. 这个连接是某高手的异常恢复方法, 实 ...
- python笔记13-多线程实战篇（tomorrow）
安装 1.tomorrow安装,用pip可以直接安装 pip install tomorrow 单线程 1.以下案例是单线程时候跑的情况,在下载图片的时候很耗时. # coding:utf-8 fro ...
- Delphi中Frame的使用方法（2）
Frame在写代码时和一般组件有什么不同呢?比如(1)中的客户信息的frame,如果想重写客户编辑按钮的click事件,会发生什么呢: procedure TBusOnSiteManager.Fram ...
- LeetCode OJ Minimum Depth of Binary Tree 递归求解
题目URL:https://leetcode.com/problems/minimum-depth-of-binary-tree/ 111. Minimum Depth of Binary T ...
- NTP for Linux
一.服务概述 NTP(network time protocol 网络时间协议)服务器是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源做同步化,提供高精度的时间校正,在LAN上与 ...
- 【笔记】git 的常用操作命令（持续更新。。。）
项目正在如火如荼的开展,代码量的繁多不得不令我们运用 git 这个有用的工具去管理我们共同协作的代码 git 在这里不作什么介绍了,百度一大堆的教程 首推廖雪峰老师的:http://www.liaox ...
- activemq5.14.5单节点安装Demo
什么情况下使用ActiveMQ? 1 多个项目之间集成 (1) 跨平台 (2) 多语言 (3) 多项目 2 降低系统间模块的耦合度,解耦 软件扩展性 3 系统前后端隔离 前后端 ...
- zookeeper伪分布式集群安装
1.安装3个zookeeper 1.1创建集群安装的目录 1.2配置一个完整的服务 这里不做详细说明,参考我之前写的 zookeeper单节点安装 进行配置即可,此处直接复制之前单节点到集群目录 创建 ...