发布时间：2025-12-11 01:22:06 浏览次数：1
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
用到一些封装好的运动函数,主要是定时器
效果为图片和图片的描述定时自动更换。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">ul,li,p,h4{padding:0;margin:0;list-style:none;}img{border:none;vertical-align:top;}#bg_box{width:1000px;height:590px;margin:50pxauto;position:relative;background:url(img/bg1.jpg)no-repeat;}.pic{width:440px;height:274px;position:absolute;top:50px;left:220px;overflow:hidden;}.li_box{width:1760px;height:274px;position:absolute;left:0;}.tags{width:440px;height:80px;position:absolute;bottom:-80px;background-image:linear-gradient(0deg,rgba(0,0,0,0.4)0%,rgba(255,255,255,0)100%);color:white;padding-left:20px;padding-top:15px;box-sizing:border-box;}.tags:nth-of-type(1){/*bottom:0;*/}.img{float:left;width:440px;height:274px;}h4{font:bold20px/30px"微软雅黑";}p{font:16px/30px"微软雅黑";}</style><scriptsrc="tween.js"></script><scriptsrc="commom.js"></script><scripttype="text/javascript">window.onload=function(){//获取元素varliBbox=$('ul')[0];varli=$('li');vartags=$('.tags')varnum=0;//设置初始位置Change()functionChange(){varM=tags[num];MTween(M,'bottom',0,500,'px','linear',function(){//先让描述内容出现num++if(num>li.length-1){//边界设置。return;}setTimeout(function(){MTween(M,'bottom',-80,500,'px','linear',function(){//让描述内容不显示MTween(liBbox,'left',-num*440,800,'px','linear',function(){Change();});//切换图片});},1000)});}}</script></head><body><sectionid="bg_box"><pclass="pic"><ulclass="li_box"><li><imgclass="img"src="img/a5.gif"></li><li><imgclass="img"src="img/a6.gif"></li><li><imgclass="img"src="img/a7.gif"></li><li><imgclass="img"src="img/a8.gif"></li></ul><pclass="tags"><h4class="title">下雨了~~~</h4><pclass="tag">这是一个适合在家睡觉的日子!!</p></p><pclass="tags"><h4class="title">包饺子~~~</h4><pclass="tag">一只会居家过日子的小狐狸!!</p></p><pclass="tags"><h4class="title">生气了~~~</h4><pclass="tag">吃掉好吃的就不生气了!!</p></p><pclass="tags"><h4class="title">出发了~~~</h4><pclass="tag">来一段说走就走的旅行!!</p></p></p></section></body></html>commom.js
functionMTween(obj,attr,end,duration,unit,way,callBack){if(obj.isAnim)return;//obj开始运动了自定义属性obj.isAnim=true;if(!way){//如果用户没有选择运动方式就默认匀速way='linear';}if(!unit){//如果用户没有选择运动方式就默认匀速unit='';}varstart=parseFloat(getStyle(obj,attr));//起始位置//varend=1000;//目标点//varduration=1000;//动画执行的总时间单位是毫秒varstartTime=Date.now();vars=end-start;//总路程//varv=s/duration;//计算出来的速度//每次20ms走一帧clearInterval(timer);vartimer=0;timer=setInterval(function(){varendTime=Date.now();//计算出当前时间vart=endTime-startTime;if(t>=duration){t=duration;clearInterval(timer);//到达目标点要清除定时器}//obj.style[attr]=t*s/duration+start+'px';//console.log(Tween[way](t,start,s,duration))obj.style[attr]=Tween[way](t,start,s,duration)+unit;//透明度的兼容处理if(attr=='opacity'){obj.style.filter='Alpha(opacity='+Tween[way](t,start,s,duration)*100+')';}if(t==duration){obj.isAnim=false;//等到上一个动画完成然后再调用if(callBack){callBack();}}},20);}tween.js
/**t:time已过时间当前时间-初始时间*b:begin起始值*c:count总的运动值总路程*d:duration持续时间总时间**s=vt;=>c=t*c/d这里只计算总共要运动的路程,不包括起始位置**attrVal=t*c/d+b;**曲线方程***///Tween.linear();varTween={linear:function(t,b,c,d){//匀速returnc*t/d+b;},easeIn:function(t,b,c,d){//加速曲线returnc*(t/=d)*t+b;},easeOut:function(t,b,c,d){//减速曲线return-c*(t/=d)*(t-2)+b;},easeBoth:function(t,b,c,d){//加速减速曲线if((t/=d/2)<1){returnc/2*t*t+b;}return-c/2*((--t)*(t-2)-1)+b;},easeInStrong:function(t,b,c,d){//加加速曲线returnc*(t/=d)*t*t*t+b;},easeOutStrong:function(t,b,c,d){//减减速曲线return-c*((t=t/d-1)*t*t*t-1)+b;},easeBothStrong:function(t,b,c,d){//加加速减减速曲线if((t/=d/2)<1){returnc/2*t*t*t*t+b;}return-c/2*((t-=2)*t*t*t-2)+b;},elasticIn:function(t,b,c,d,a,p){//正弦衰减曲线(弹动渐入)if(t===0){returnb;}if((t/=d)==1){returnb+c;}if(!p){p=d*0.3;}if(!a||a<Math.abs(c)){a=c;vars=p/4;}else{vars=p/(2*Math.PI)*Math.asin(c/a);}return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},elasticOut:function(t,b,c,d,a,p){//*正弦增强曲线(弹动渐出)if(t===0){returnb;}if((t/=d)==1){returnb+c;}if(!p){p=d*0.3;}if(!a||a<Math.abs(c)){a=c;vars=p/4;}else{vars=p/(2*Math.PI)*Math.asin(c/a);}returna*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},elasticBoth:function(t,b,c,d,a,p){if(t===0){returnb;}if((t/=d/2)==2){returnb+c;}if(!p){p=d*(0.3*1.5);}if(!a||a<Math.abs(c)){a=c;vars=p/4;}else{vars=p/(2*Math.PI)*Math.asin(c/a);}if(t<1){return-0.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;}returna*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*0.5+c+b;},backIn:function(t,b,c,d,s){//回退加速(回退渐入)if(typeofs=='undefined'){s=1.70158;}returnc*(t/=d)*t*((s+1)*t-s)+b;},backOut:function(t,b,c,d,s){if(typeofs=='undefined'){s=3.70158;//回缩的距离}returnc*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},backBoth:function(t,b,c,d,s){if(typeofs=='undefined'){s=1.70158;}if((t/=d/2)<1){returnc/2*(t*t*(((s*=(1.525))+1)*t-s))+b;}returnc/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},bounceIn:function(t,b,c,d){//弹球减振(弹球渐出)returnc-Tween['bounceOut'](d-t,0,c,d)+b;},bounceOut:function(t,b,c,d){//*if((t/=d)<(1/2.75)){returnc*(7.5625*t*t)+b;}elseif(t<(2/2.75)){returnc*(7.5625*(t-=(1.5/2.75))*t+0.75)+b;}elseif(t<(2.5/2.75)){returnc*(7.5625*(t-=(2.25/2.75))*t+0.9375)+b;}returnc*(7.5625*(t-=(2.625/2.75))*t+0.984375)+b;},bounceBoth:function(t,b,c,d){if(t<d/2){returnTween['bounceIn'](t*2,0,c,d)*0.5+b;}returnTween['bounceOut'](t*2-d,0,c,d)*0.5+c*0.5+b;}}
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流