兼容性获取样式+缓慢停止的运动
来源:互联网 发布:js对象数组转json 编辑:程序博客网 时间:2024/05/22 02:08
<script>
var btn = document.getElementById("btn");
var box =document.getElementById("box");
btn.onclick=function(){
move(box,{
width:100,
height:600,
left:600
},function(){
move(box,{
top:30,
left:30
});
})
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var k in json){
var leader=parseInt(getStyle(obj,k));
var step=(json[k]-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
obj.style[k]=leader+"px";
if (leader!=json[k]) {
flag=false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},30)
}
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
else
{
return window.getComputedStyle(obj,null)[attr];
}
}
</script>
var btn = document.getElementById("btn");
var box =document.getElementById("box");
btn.onclick=function(){
move(box,{
width:100,
height:600,
left:600
},function(){
move(box,{
top:30,
left:30
});
})
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var k in json){
var leader=parseInt(getStyle(obj,k));
var step=(json[k]-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
obj.style[k]=leader+"px";
if (leader!=json[k]) {
flag=false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},30)
}
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
else
{
return window.getComputedStyle(obj,null)[attr];
}
}
</script>
阅读全文
0 0
- 兼容性获取样式+缓慢停止的运动
- 缓慢停止的运动
- CSS样式的兼容性
- js 通过兼容性写法获取样式
- 浅谈工业机器人的运动停止
- 46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧
- javascript操作CSS样式时的兼容性
- IE8的样式兼容性适应方法
- js,scrollTop的兼容性获取
- javascript不定参数&&兼容性样式设置与获取
- 浏览器兼容性:停止事件冒泡和阻止浏览器的默认
- Unity让带有Rigidbody组件的游戏对象停止运动
- Js运动动画系列6--多物体运动-获取样式属性
- Js运动动画系列7--多物体运动-设置样式属性做不同的运动
- 弹性运动+摩擦力+运动停止条件
- 获取兼容性的滚动scrollTOP-LEFT值
- button的样式在浏览器上的兼容性
- 针对firefox ie6 ie7 ie8的css样式兼容性
- poj 3481 Double Queue (Treap)
- 欢迎使用CSDN-markdown编辑器
- Java的学习之路--HashMap原理
- 文章标题
- Redis初解之原理
- 兼容性获取样式+缓慢停止的运动
- MYSQL优化的一些性能与技巧
- Python:Matplotlib 画图
- 144. Binary Tree Preorder Traversal
- 4.SQLite的使用
- Java并发编程(三)——原子操作
- WIndows编程之线程池的使用
- Robot Framework使用2-脚本格式
- 手动修改和编译内核