Heim > Artikel > Web-Frontend > So erzielen Sie den Effekt von Through-Wall-Werbung auf der Homepage in CSS3

So erzielen Sie den Effekt von Through-Wall-Werbung auf der Homepage in CSS3

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

Wenn Sie Lagou.com jemals betreten haben, wird dies auf jeden Fall einen tiefgreifenden Einfluss auf die Homepage der Website haben. Die Wirkung der „Through-the-Wall“-Werbung auf der Homepage ist also sehr cool -die-Wand-Werbung? Heute nehmen wir Sie mit zur Bedienung. Verwenden Sie CSS3, um wanddurchdringende Anzeigen zu erzielen.

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

Ich glaube, dass Sie nach dem Lesen des obigen Codes bereits das Geheimnis dieser Art von Durchwandwerbung verstehen. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man Karussellcode für digitale Fokusdiagramme in HTML implementiert

Wie man mit CSS-Webseiten-Fehlausrichtungen umgeht

So verwenden Sie CSS3, um Umschalteffekte für unregelmäßige Bilder zu erstellen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt von Through-Wall-Werbung auf der Homepage in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie schreibe ich einen If-Bedingungs-Hack in CSS?Nächster Artikel：Wie schreibe ich einen If-Bedingungs-Hack in CSS?

In Verbindung stehende Artikel

Mehr sehen