CSS3裡怎麼達成首頁穿牆廣告效果-css教學-PHP中文網

CSS3裡怎麼達成首頁穿牆廣告效果
php中世界最好的语言
發布： 2017-11-25 14:46:37
原創
1873 人瀏覽過
如果大家進過拉鉤網的話一定會對他們的網站首頁影響深刻，首頁的穿牆廣告效果是非常酷炫的，那麼這個穿牆廣告的效果怎麼實現呢？今天我們就帶大家來操作一下。用CSS3來實現穿牆效果的廣告。
<!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||&#39;ease-out&#39;;
        
         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 &#39;linear&#39;:
                                               var cur = start[name]+dis[name]*n/count;
                                               break;
                                     case &#39;ease-in&#39;:
                                               var a = n/count;
                                               var cur = start[name]+dis[name]*Math.pow(a,3);
                                               break;
                                     case &#39;ease-out&#39;:
                                               var a = 1-n/count;
                                               var cur = start[name]+dis[name]*(1-Math.pow(a,3));
                                               break;
                            }
                            if(name==&#39;opacity&#39;){
                                     obj.style.opacity = cur;
                                     obj.style.filter = &#39;alpha(opacity:&#39;+cur*100+&#39;)&#39;;
                            }else{
                                     obj.style[name] = cur+&#39;px&#39;;
                            }
                   }
                   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 = &#39;-200px&#39;;
                                     oS.style.top = 0;
                                     break;
                            case 1:
                                     //下
                                     oS.style.left = 0;
                                     oS.style.top = &#39;200px&#39;;
                                     break;
                            case 2:
                                     //右
                                     oS.style.left = &#39;200px&#39;;
                                     oS.style.top = 0;
                                     break;
                            case 3:
                                     //上
                                     oS.style.left = 0;
                                     oS.style.top = &#39;-200px&#39;;
                                     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(&#39;li&#39;);
         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>
登入後複製
我相信看了以上程式碼你已經清楚了這種穿牆廣告的奧秘。更多精彩請關注php中文網其它相關文章！