点滴积累【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> ...
随机推荐
- Delphi DevExpress下载
http://download.csdn.net/detail/wozengcong/8395285#comment
- c# 冒号:C#中两个冒号(::)的作用
global::System.Console.WriteLine(number); 冒号在什么地方用. 点是空间下类,表示下一层的意思? 这里面::前面是GAC的标示符global,用法比较特殊,和. ...
- 二十四种设计模式：桥接模式(Bridge Pattern)
桥接模式(Bridge Pattern) 介绍将抽象部分与它的实现部分分离,使它们都可以独立地变化. 示例有一个Message实体类,对它的操作有Insert()和Get()方法,现在使这些操作的抽象 ...
- Weblogic常见故障之二：XAER_NOTA XAException问题的解决
在weblogic执行XA操作的时候,我们会碰到如下的错误,后来发现是JDBC配置的问题.主要报错:java.sql.SQLException: XA error: XAER_NOTA : The X ...
- 流畅的python第三章字典和集合学习记录
什么是可散列的数据类型 如果一个对象是可散列的,那么在这个对象的生命周期中,他的散列值是不变的,而且这个对象需要实现__hash__()方法.另外可散列对象还要有__qe__()方法.这样才能跟其他键 ...
- utf8汉字编码16进制对照(转载)
utf8汉字编码16进制对照 GB Unicode UTF-8 Chinese CharacterCode code# Code (coded in UTF-8)D2BB 4E00 E4 B8 80 ...
- 在Spring Boot项目中使用Spock框架
转载:https://www.jianshu.com/p/f1e354d382cd Spock框架是基于Groovy语言的测试框架,Groovy与Java具备良好的互操作性,因此可以在Spring B ...
- Swing的GUI组件得到焦点
Swing的GUI组件如JButtin,JTextArea,JRadioButton,JComboBox等,可以使用requestFocus()方法来获得焦点.
- weblogic 异常 com.rsa.jsafe.JSAFE_PaddingException: Could not perform unpadding: invalid pad byte.次异常怎么解决
问题 更改控制台密码后,服务重启失败,无法启动,报错如下: <-- 下午03时10分49秒 CST> <Info> <WebLogicServer> <BEA ...
- 算法笔记_164:算法提高 最小方差生成树(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 给定带权无向图,求出一颗方差最小的生成树. 输入格式 输入多组测试数据.第一行为N,M,依次是点数和边数.接下来M行,每行三个整数U,V, ...