집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 홈페이지에서 벽을 통한 광고 효과를 얻는 방법

CSS3 홈페이지에서 벽을 통한 광고 효과를 얻는 방법

php中世界最好的语言원래의: 2017-11-25 14:46:371898검색

Lagou.com에 가보신 적이 있다면 분명히 웹사이트 홈페이지에 큰 영향을 미칠 것입니다. 홈페이지에서 벽을 통한 광고의 효과는 매우 멋집니다. -벽광고? 오늘 우리는 당신이 그것을 작동하도록 안내할 것입니다. 벽을 관통하는 광고를 얻으려면 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!