点滴积累【JS】---JS小功能（JS实现动态添加运动属性)
效果：
思路：
首先遍历div挨个执行onmouseover事件，再设置获取非行间样式。然后编写setInterval计时器框架，框架内容是：将三个参数 div、div属性、div的目标点，分别获得，然后设置计时器，设置div的移动速度，然后进位转换，再判断什么时候停止，再进行移动。
代码：
<head runat="server">
<title></title>
<style type="text/css">
div
{
width: 200px;
height: 200px;
background: #FF0000;
margin: 10px;
border: 5px solid black;
float:left;
}
</style>
<script type="text/javascript"> window.onload = function () {
var oDivAll = document.getElementsByTagName('div');
for (var i = 0; i < oDivAll.length; i++) { //遍历div触发事件
oDivAll[i].timer = null;
oDivAll[i].onmouseover = function () {
move(this, 'font-size', 50); //添加【任意属性】进行改变
}
oDivAll[i].onmouseout = function () {
move(this, 'font-size', 20);
}
}
};
function getStyle(obj, name) { //获取非行间样式
if (obj.currentStyle) { //判断兼容性
return obj.currentStyle[name]; //兼容IE
}
else {
return getComputedStyle(obj, false)[name]; //兼容Chrome FF
}
}
function move(obj, attr, end) { //框架部分
clearInterval(obj.timer); //清除之前计时器
obj.timer = setInterval(function () { //开始相应物体的计时器
var objStyle = parseInt(getStyle(obj, attr)); //该物体的属性参数
var speed = (end - objStyle) / 5; //（终点-每次移动的距离）/缩放系数=要走的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //小数取整，进位取整
if (objStyle == end) { //如果距离到达终点那么就关闭计时器
clearInterval(obj.timer);
}
else { obj.style[attr] = objStyle + speed + 'px'; //根据属性进行运动
}
}, 30)
}
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div>青苹果</div>
</body>
点滴积累【JS】---JS小功能（JS实现动态添加运动属性)的更多相关文章
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- 微信小程序之一：动态添加view（view包含picker,input）
<view wx:for="{{array}}" wx:key="this" class="borderContainer"> ...
- 小生功能贴<一> --- 动态添加应用 具有长按删除功能
---恢复内容开始--- 动态添加应用 具有长按删除功能 功能如下图: (图片显示功能不是你要的,那就默默关闭页面吧) 设计思路: 页面一:用girdview网格显示图标 ...
- 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自定义功能函数实现动态添加网址参数修改网址参数值
无论是前端开发还是后台设计,很多时候开发人员都需要获取当前或目标网址的相关信息.这个已有现成的内置对象属性可以直接调用了(下面是获取当前页面的参考代码) 复制代码 代码如下: <script t ...
- vue.js如何实现点击按钮动态添加li
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- NHibernate 集合映射基础(第四篇) - 一对一、 一对多、多对多小示例
映射文件,用于告诉NHibernate数据库里的表.列于.Net程序中的类的关系.因此映射文件的配置非常重要. 一.一对一 NHibernate一对一关系的配置方式使用<one-to-one&g ...
- 最快的csv文件入到数据库的方法
最快的csv文件入到数据库的方法:EXEC master.sys.sp_configure 'show advanced options', 1 ; RECONFIGURE ; EXEC master ...
- 【RocketMQ】【分布式事务】使用RocketMQ实现分布式事务
参考地址:https://blog.csdn.net/zyw23zyw23/article/details/79070044 视频地址:https://v.youku.com/v_show/id_XO ...
- iOS中nil、Nil、NULL、NSNull详解
nil nil 是 ObjC 对象的字面空值,对应 id 类型的对象,或者使用 @interface 声明的 ObjC 对象. 例如: NSString *someString = nil; NSUR ...
- C语言中setjmp与longjmp学习笔记
C语言中setjmp与longjmp学习笔记 一.基础介绍 头文件:#include<setjmp.h> 原型: int setjmp(jmp_buf envbuf) ,然而longjm ...
- SQLAlchemy中filter()和filter_by()的区别
1.filter引用列名时,使用“类名.属性名”的方式,比较使用两个等号“==” 2.filter_by引用列名时,使用“属性名”,比较使用一个等号“=” 3.在使用多条件匹配的时候,filter需要 ...
- .NET MVC 验证码
.NET MVC 验证码
- LeetCode——3Sum & 3Sum Closest
3Sum 题目 Given an array S of n integers, are there elements a,b,c in S such that a + b + c = 0? Find ...
- Android OpenGL加入光照和材料属性
转载请注明出处:[huachao1001的专栏:http://blog.csdn.net/huachao1001] 在上一篇文章[ Android OpenGL显示随意3D模型文件 ]中.我们学习了怎 ...
- （转） java中try/catch性能和原理
stackoverflow上有一个讨论,参与的人还挺多: https://stackoverflow.com/questions/141560/should-try-catch-Go-inside-o ...