Maison > Article > interface Web > Comment obtenir l'effet de la publicité à travers le mur sur la page d'accueil en CSS3

Comment obtenir l'effet de la publicité à travers le mur sur la page d'accueil en CSS3

php中世界最好的语言original: 2017-11-25 14:46:371856parcourir

Si vous êtes déjà entré sur Lagou.com, cela aura certainement un impact profond sur la page d'accueil de leur site Web. L'effet de la publicité à travers le mur sur la page d'accueil est très cool. Alors, comment obtenir cet effet. -une publicité sur le mur ? Aujourd'hui, nous vous emmènerons le faire fonctionner. Utilisez CSS3 pour créer des publicités qui pénètrent dans les murs.

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

Je crois qu'après avoir lu le code ci-dessus, vous comprenez déjà le mystère de ce type de publicité à travers le mur. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Comment implémenter le code du carrousel du graphique de mise au point numérique en HTML

Comment gérer le désalignement des pages Web CSS

Comment utiliser CSS3 pour créer des effets de commutation pour des images irrégulières

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment écrire si la condition est hackée en CSSArticle suivant：Comment écrire si la condition est hackée en CSS

Articles Liés

Voir plus