php滑动门效果,js推拉门效果的实现

这次给大家带来js推拉门效果的实现,js推拉门效果实现的注意事项有哪些,下面就是实战案例,一起来看一下。// JavaScript Document

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){

if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){

iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}

else{

iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;

}

}

else{

iCur = parseInt(getStyle(obj,attr)) || 0;

}

var iSpeed = (json[attr] - iCur)/8;

iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if(iCur!=json[attr]){

bBtn = false;

}

if(attr == 'opacity'){

obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';

obj.style.opacity = (iCur + iSpeed)/100;

}

else{

obj.style[attr] = iCur + iSpeed + 'px';

}

}

if(bBtn){

clearInterval(obj.timer);

if(endFn){

endFn.call(obj);

}

}

},30);

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值