Home  >  Article  >  Web Front-end  >  How to achieve the effect of through-wall advertising on the homepage in CSS3

How to achieve the effect of through-wall advertising on the homepage in CSS3

php中世界最好的语言
php中世界最好的语言Original
2017-11-25 14:46:371849browse

If you have entered Lagou.com, you will definitely have a profound impact on their website homepage. The effect of the through-the-wall advertisement on the homepage is very cool. So how to achieve the effect of this through-the-wall advertisement? Today we will take you to operate it. Use CSS3 to achieve wall-penetrating ads.

<!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>

I believe that after reading the above code, you already understand the mystery of this kind of through-wall advertising. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

How to implement digital focus chart carousel code in HTML

How to deal with CSS web page misalignment

How to use CSS3 to create switching special effects for irregular images

The above is the detailed content of How to achieve the effect of through-wall advertising on the homepage in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn