js仿拉勾网首页穿墙广告效果

效果图：

代码如下：

！doctype html html head meta charset=' UTF-8 ' title title/title style * { margin :0；划水：0;列表式：无；} ul { overflow:hidden宽度宽度：630 pxmargin :100 px auto } ul Li { float : left位置：相对；宽度宽度：200像素高度：200 px背景# cccmargin:5px飞越：隐藏；} ul Li span {位置：绝对；宽度：100%;高度：100%;background:rgba(255，0，0，0.3)；左侧：-200像素；top:0}/style脚本函数getStyle(obj，sName){ return(obj。current style | | get computed style(obj，false))[SName]；}函数move(obj，json，options){ options=options | | { }；选项。持续时间=选项。持续时间| | 700；选项。宽松=选项。宽松||"放松";var start={ }；var dis={ }；for(JSON中的var name){ start[name]=parseFloat(getStyle(obj，name))；dis[name]=JSON[name]-start[name]；} var count=Math。地板(可选。持续时间/30)；var n=0；clearInterval(obj。计时器)；物体。timer=SetInterval(function(){ n；for(JSON中的var name){ switch(选项。easy){ case ' linear ' : var cur=start[name]dis[name]* n/count；打破；案例"轻松“: var a=n/count；var cur=start[name]dis[name]* math。pow(a，3)；打破；病例"缓解" : var a=1-n/计数；var cur=start[name]dis[name]*(1-math。粉末(a，3))；打破；} if(name=='不透明度'){ obj。风格。不透明度=cur物体。风格。filter=' alpha(opa city 3360 ' cur * 100 ')'；} else { obj。style[name]=cur ' px '；} } if(n==count){ clearInterval(obj。计时器)；选项。完整选项。完成()；} },30);}函数a2d(n)返回n * 180/数学.PI；}函数气垫船(ev，obj){ var a=ev.clientX-obj.offsetLeft-obj.offsetWidth/2; var b=obj。场外obj.offsetHeight/2-ev.clientY;返回Math.round((a2d(Math.atan2(b，a))180/90)% 4；}函数通过(obj){ var oS=obj。子级[0]；物体。onmouseenter=function(ev){ var oEvent=ev | | event；var dir=HeaLTH DiR(oEvent，obj)；开关（目录){ case 0: //左操作系统。风格。左='-200 px '；操作系统。风格。top=0；打破；第1: //下操作系统。风格。left=0；操作系统。风格。top=' 200 px打破；第2: //右操作系统。风格。左侧=' 200 px操作系统。风格。top=0；打破；第3: //上操作系统。风格。left=0；操作系统。风格。top='-200 px '；打破；}移动(oS，{left:0，top :0 })；};物体。onmouselave=function(ev){ var oEvent=ev | | event；var dir=HeaLTH DiR(oEvent，obj)；switch(dir){ case 0: move(oS，{left:-200，top :0 })；打破；案例1:移动(oS，{left:0，top :200 })；打破；案例2:移动(oS，{left:200，top :0 })；打破；案例3:移动(oS，{left:0，top :-200 })；打破；} };}窗口。onload=function(){ var AlI=document。getelementsbytagname(' Li ')；for(var I=0；iali . lengthi){ 0通过(AlI[I])；}};/script/head dy ul lispan/span/Li lispan/span/Li lispan/span/Li lispan/span/Li lispan/span/Li lispan/span/Li lispan/span/Li lispan/span/Li/ul/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！