点滴积累【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> ...
随机推荐
- STL迭代器及迭代器失效问题
迭代器失效: 典型的迭代器失效. 首先对于vector而言,添加和删除操作可能使容器的部分或者全部迭代器失效.那为什么迭代器会失效呢?vector元素在内存中是顺序存储,试想:如果当前容器中已经存在了 ...
- 【js】js数组置空的三种方式
方式1: var arr = new Array(1,2,3); alert(arr); arr.splice(0, arr.length); alert(arr); 方式2: var arr = n ...
- OpenShift应用镜像构建(2) - 链式构建
Openshift对于应用构建提供了三种模式 从应用的源代码构建并部署,Openshift通过一个S2I的构建过程编译打包并实现发布,具体可以参考 https://www.cnblogs.com/er ...
- Ceph源码解析：读写流程
转载注明出处,整理也是需要功夫的,http://www.cnblogs.com/chenxianpao/p/5572859.html 一.OSD模块简介 1.1 消息封装:在OSD上发送和接收信息. ...
- python查看字节码
查看字节码可以帮助我们更好的理解python的执行流程 查看字节码列表 import opcode for op in range(len(opcode.opname)): print('0x%.2X ...
- RenderMonkey 练习 第三天 【OpenGL renderToTexture】
渲染到纹理: 1. 新建一个OpenGL 空effect; 2. 添加渲染目标纹理, Add Texture-> Add Render Texture 3. 添加一个渲染pass 4. 将pas ...
- "com.android.ide.s.ProcessException:Process 'cand 'C:\Program Files\Java\jdk1.8.0_60\bin\java.exe'' finished with non-zero exit value 2"
使用Android Studio 出现该问题: "com.android.ide.common.process.ProcessException: org.gradle.process.in ...
- 深度增强学习--A3C
A3C 它会创建多个并行的环境, 让多个拥有副结构的 agent 同时在这些并行环境上更新主结构中的参数. 并行中的 agent 们互不干扰, 而主结构的参数更新受到副结构提交更新的不连续性干扰, 所 ...
- SQL Server datetime数据类型设计、优化误区
一.场景 在SQL Server 2005中,有一个表TestDatetime,其中Dates这个字段的数据类型是datetime,如果你看到表的记录如下图所示,你最先想到的是什么呢? (图1:数据列 ...
- [Android Pro] android中permission_group与permisson区别、作用
转载:http://blog.csdn.net/feng88724/article/details/6409313 其实Android在定义 permission 时, 为每个Permission都进 ...