点滴积累【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> ...
随机推荐
- 阿里云ECS使用SSH连接CentOS 6.9经常断线的问题解决：OperationTimedOut
说明:不一定有效,可以试一下. 设置: vi /etc/ssh/sshd_config #添加或修改以下配置 ClientAliveInterval #每隔多少秒给SSH客户端发送一次信号 Clien ...
- java自带的jvm分析工具
http://domark.iteye.com/blog/1924302 这段时间觉得很有必要对java的内存分析工具进行熟悉,这样以后出现机器负载较高,或者反应很慢的时候,我就可以查找原因了.上 ...
- OM-销售订单行【订购项目】配置参数文件控制
ONT_RESTRICT_CUST_ITEMS OM:限制行层收货地址的客户项目 ONT_USE_MVIEW_FOR_ITEMS_LOV OM:为项目值列表使用物化视图(遵守项目可订购性规则)
- IIS_未能映射路径“/”。
解决方法: 使用托管管道默认是为[经典]的应用程序池
- Sata win7 热插拔（AHCI）
主板支持AHCI,把sata模式改成AHCI,在bios打开SATA热插拔开关 开启AHCI,需要修改注册表:HKEY_LOCAL_MACHINE\System\CurrentControlSet\S ...
- [java] 简单的ConcurrentHashMap
ConcurrentMap和Guava的LocalCache实现原理相近,底层的存储方式使用的时table方式来存储.这里使用最简单且最暴力的方式,在每次访问的时候均加锁. ConcurrentHas ...
- cocos2d-x 学习笔录：将iOS项目编译成Andriod项目
一.Android 环境搭建 1.安装Andriod-NDK(Native Development Kit) 新建一个文件夹(eg:NDK),解压Android-NDK,将解压文件与压缩包放在一个目录 ...
- [Python爬虫] 之十四：Selenium +phantomjs抓取媒介360数据
具体代码如下: # coding=utf-8import osimport refrom selenium import webdriverimport selenium.webdriver.supp ...
- Spark Streaming updateStateByKey和mapWithState源码解密
本篇从二个方面进行源码分析: 一.updateStateByKey解密 二.mapWithState解密 通过对Spark研究角度来研究jvm.分布式.图计算.架构设计.软件工程思想,可以学到很多东西 ...
- [React] Detect user activity with a custom useIdle React Hook
If the user hasn't used your application for a few minutes, you may want to log them out of the appl ...