运动的综合练习(有封装函数福利~~)

原创 影沫 随笔 效果展示 3144阅读 2014-08-26 16:09:02 举报

有好几天没发笔记了,主要是认为尽量挑综合性高点的发,过于小白的都不好意思发上来···
这次带来的是对象通过计时器运动的效果,方块是用innerHTML加的,最近发现这种动态添加方法有奇效啊。
同时自己封装了两个函数,大家可以直接拿去用,已经尽量做到最大通用性了。以下是演示,落完后点击会上来并消失,求落完再点这个BUG我没想通····{:4_135:}

**代码片段 1**
以下是上面我封装的几个函数

一:可以通过输入 getStyle (对象, 属性 )来获取元素的当前属性,写判断是为了兼容IE
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

二:运动函数,可输入doMove (对象,方向,步长,目标距离,回调函数) 来使对象运动,方向top,left,right,buttom都行。回调函数可以写点运动结束时添加的行为

function doMove (obj,attr,dir,target,doendFn) 

{
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
clearInterval( obj.dotimer);
obj.dotimer = setInterval(function ()
{
var speed = parseInt(getStyle( obj, attr )) + dir;
if ( speed > target && dir > 0 || speed < target && dir < 0 )
{
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target )
{
clearInterval( obj.dotimer );
doendFn&&doendFn();
}
}, 30);
}

三:逐渐透明,输入 opacity(对象,透明增量),注意每次的透明增量只能在0~1之间。

function opacity(obj,dre)
{
clearInterval(obj.opatimer);
obj.opatimer=setInterval(function()
{
var opa=getStyle(obj,'opacity')
opa-=dre;
if(opa<0){opa=0;}
{
obj.style.opacity=opa;
obj.style.filter=alpha(opacity=opa*100);
}
if(opa=0){clearInterval(obj.opatimer);}
},50)
}

评论 ( 13 )
最新评论
hugeannex 9F 2014-08-27 19:20:44 13F

宅着呢。

影沫 7F 2014-08-27 10:13:41 12F

误传,误传······

影沫 7F 2014-08-27 10:09:34 11F

懂了,谢。主要是当初想IE的路径会不会在标准浏览器导致双重触发~~话说我自学,没去培训机构。以后有问题可以多交流麻。一个人遇见BUG一弄就是一上午,太耗时间·····

影沫 7F 2014-08-27 10:03:55 10F

小水晶 5F 2014-08-27 09:40:13 9F

哈哈,浪神,去了哪家公司最后

kateli1991 5F 2014-08-27 09:26:45 8F

function opacity(obj,dre)   //不兼容IE
{
        clearInterval(obj.opatimer);
        obj.opatimer=setInterval(function()
        {
                var opa=getStyle(obj,'opacity')        
                opa-=dre;
            

445829929 5F 2014-08-27 08:41:39 7F

挺好的!

hugeannex 5F 2014-08-26 23:06:53 6F

   什么时候有这名头了。。。

影沫 4F 2014-08-26 22:54:43 5F

受教,因为初学,才到封装函数。学到CSS3还有段时间。到时候可求浪神指点

hugeannex 1F 2014-08-26 22:14:03 4F

意义不大,css3秒杀

mano 1F 2014-08-26 21:06:14 3F

mark  

影沫 1F 2014-08-26 20:47:38 2F

多谢关注·

maxwell 2014-08-26 18:05:26 1F

mark