js如何模擬拉勾網(wǎng)首頁穿墻廣告效果-創(chuàng)新互聯(lián)

小編給大家分享一下js如何模擬拉勾網(wǎng)首頁穿墻廣告效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為精河企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、做網(wǎng)站，精河網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

效果圖：

js如何模擬拉勾網(wǎng)首頁穿墻廣告效果

代碼如下：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
<style>
*{margin:0; padding:0; list-style:none;}
ul{ overflow:hidden; width:630px; margin:100px auto;}
ul li{ float:left; position:relative; width:200px; height:200px; background:#ccc; margin:5px; overflow:hidden;}
ul li span{ position:absolute; width:100%; height:100%; background:rgba(255,0,0,0.3); left:-200px; top:0;}
</style>
<script>
function getStyle(obj,sName){
 return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
 options = options||{};
 options.duration = options.duration||700;
 options.easing = options.easing||'ease-out';
 var start = {};
 var dis = {};
 for(var name in json){
 start[name] = parseFloat(getStyle(obj,name));
 dis[name] = json[name]-start[name];
 }
 var count = Math.floor(options.duration/30);
 var n = 0;
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 n++;
 for(var name in json){
 switch(options.easing){
 case 'linear':
  var cur = start[name]+dis[name]*n/count;
  break;
 case 'ease-in':
  var a = n/count;
  var cur = start[name]+dis[name]*Math.pow(a,3);
  break;
 case 'ease-out':
  var a = 1-n/count;
  var cur = start[name]+dis[name]*(1-Math.pow(a,3));
  break;
 }
 if(name=='opacity'){
 obj.style.opacity = cur;
 obj.style.filter = 'alpha(opacity:'+cur*100+')';
 }else{
 obj.style[name] = cur+'px';
 }
 }
 if(n==count){
 clearInterval(obj.timer);
 options.complete&&options.complete();
 }
 },30);
}
function a2d(n){
 return n*180/Math.PI;
}
function hoverDir(ev,obj){
 var a = ev.clientX-obj.offsetLeft-obj.offsetWidth/2;
 var b = obj.offsetTop+obj.offsetHeight/2-ev.clientY;

 return Math.round((a2d(Math.atan2(b,a))+180)/90)%4;
}
function through(obj){
 var oS = obj.children[0];
 obj.onmouseenter = function(ev){
 var oEvent = ev||event;
 var dir = hoverDir(oEvent,obj);
 switch(dir){
 case 0:
 //左
 oS.style.left = '-200px';
 oS.style.top = 0;
 break;
 case 1:
 //下
 oS.style.left = 0;
 oS.style.top = '200px';
 break;
 case 2:
 //右
 oS.style.left = '200px';
 oS.style.top = 0;
 break;
 case 3:
 //上
 oS.style.left = 0;
 oS.style.top = '-200px';
 break;
 }
 move(oS,{left:0,top:0});
 };
 obj.onmouseleave = function(ev){
 var oEvent = ev||event;
 var dir = hoverDir(oEvent,obj);
 switch(dir){
 case 0:
 move(oS,{left:-200,top:0});
 break;
 case 1:
 move(oS,{left:0,top:200});
 break;
 case 2:
 move(oS,{left:200,top:0});
 break;
 case 3:
 move(oS,{left:0,top:-200});
 break;
 }
 };
}
window.onload = function(){
 var aLi = document.getElementsByTagName('li');
 for(var i=0;i<aLi.length;i++){
 through(aLi[i]);
 }
};
</script>
</head>
<body>
 <ul>
 <li><span></span></li>
 <li><span></span></li>
 <li><span></span></li>
 <li><span></span></li>
 <li><span></span></li>
 <li><span></span></li>
 </ul>
</body>
</html>

以上是“js如何模擬拉勾網(wǎng)首頁穿墻廣告效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：js如何模擬拉勾網(wǎng)首頁穿墻廣告效果-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.muchs.cn/article8/ceooop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、Google、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、自適應(yīng)網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)