原生js设计的运动框架

这个运动框架适合绝大多数的动画运动,话不多说,先上代码:

function move(obj,json,fn){

//关闭定时器
clearInterval(obj.timer);

//开启定时器
obj.timer = setInterval(function(){
var bStop = true;
for(var attr in json){
//先判断是否是透明度
var iCur;
if(attr == "opacity"){

//parseInt:防止在IE出现闪烁问题
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{

//将字符串转换为数字
iCur = parseInt(getStyle(obj,attr));//对opacity进行兼容处理;
}

//算速度

var speed = (json[attr] - iCur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(json[attr] != iCur){
bStop = false;
}

if(attr == "opacity"){
obj.style.opacity = (iCur+speed)/100;
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")"
}else{
obj.style[attr] = iCur+speed+‘px‘;
}
}

//如果所有都到达了目标点,关闭定时器

if(bStop){
clearInterval(obj.timer);
fn&&fn();
}
},30)
}

原文地址:https://www.cnblogs.com/curry30/p/9060943.html

时间: 2024-11-07 05:53:29

原生js设计的运动框架的相关文章

js实现的运动框架代码实例

js实现的运动框架代码实例:元素的运动效果在大量的场景中都有应用,最典型的一个就是网站的客服系统,一般都会随着滚动条运动,本章节就介绍一下js的一个运动框架实例,希望能够给需要的朋友带来借鉴作用.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwh

JS的完美运动框架

function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } //注意:在多物体运动框架中,所有东西都不能公用 !否则出问题,BUG:将必要的变量加到物体的属性中就行.即:属性与运动对象绑定:速度.其他属性值(如透明度等等) function startMove(obj, jso

JS 之完美运动框架

完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(){ move(this,{width:200,height:200}); } } function getStyle(obj,attr){ if (obj.currentStyle) { r

js之任意值运动框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js 多物体运动框架

多物体运动框架例子:多个Div,鼠标移入biankuan 单定时器,存在问题每个Div一个定时器总结:参数问题:当运动当前的div的时候可以传参数onStart(obj,tag):obj为当前运动的div 调用时用thistag表示运动的终点距离开一个定时器(当三个div一起运动时会卡)所以利用for循环开三个定时器步骤:1.设置定时器 var timer=null:2.关闭定时器clearInterval(obj.timer);3.开启定时器:obj.timer=setInterval(fun

近期学习的原生JS知识以及jQuery框架

[正则表达式]1.正则表达式包括两部分: ① 定义正则表达式的规则 ② 定义正则表达式的模式(i/g/m)2.声明正则表达式: ① 字面声明 : var reg = /表达式规则/表达式模式 ② 使用new关键字: var reg = new RegExp("表达式规则","表达式模式") eg: var reg = new RegExp("white","g");3.正则表达式的常用模式: ① g:全局匹配.不加g为默认为费

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

使用原生JS实现一个风箱式的demo,并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. 1 function getStyle(obj,attr) { 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr];//为了获取IE下的属性值 4 }else{ 5 return window.getComputedStyle(ob