点滴积累【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> ...
随机推荐
- C# 高德地图调用帮助类 GaodeHelper
/// <summary> /// 高德地图调用帮助类 /// 更多详情请参考 高德api /// </summary> public class GaodeHelper { ...
- java自带的jvm分析工具
http://domark.iteye.com/blog/1924302 这段时间觉得很有必要对java的内存分析工具进行熟悉,这样以后出现机器负载较高,或者反应很慢的时候,我就可以查找原因了.上 ...
- （转）探索C++的秘密之详解extern "C",这就是为什么很多.lib被我们正确调用确总是无法解析的。
(转载,绝对的有用) lib被我们正确调用确总是无法解析.这是C++编译和C编译的区别 时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus extern "C&qu ...
- Spring @Autowired 注解不生效
@Autowired默认不生效.为了生效,需要在xml配置:<context:annotation-config> 注解一<context:component-scan base-p ...
- TCP-滑动窗口概念
参考博客: http://blog.chinaunix.net/uid-26275986-id-4109679.html
- python学习:Windows 下 Python easy_install 的安装
Windows 下 Python easy_install 的安装 下载安装python安装工具下载地址:http://pypi.python.org/pypi/setuptools 可以找到 ...
- JDK 7中的函数式编程思想[转载]
原文作者的观点是Lambda表达式一定会包含在JDK 7中,而全文也着重介绍了这方面的知识,作者认为函数式编程的概念也将出现在JDK 7中. Lambda表达式 Lambda表达式并不是什么新概念,自 ...
- JS夯实基础：Javascript 变态题解析 (下)
function sidEffecting(ary) { ary[] = ary[]; } function bar(a,b,c) { c = sidEffecting(arguments); ret ...
- JS前端下载文本文件小技巧：1、download属性；2、借助Blob转换成二进制下载
一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...
- URLRewrite地址重定向的实现
URLRewrite就是我们通常说的地址重写,用户得到的全部都是经过处理后的URL地址.其优点有: (1)提高安全性,可以有效的避免一些参数名.ID等完全暴露在用户面前,如果用户随便乱输的话,不符合规 ...