欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3里怎么实现首页穿墙广告效果

程序员文章站 2024-01-01 18:33:34
...
如果大家进过拉钩网的话一定会对他们的网站首页影响深刻,首页的穿墙广告效果是非常炫酷的,那么这个穿墙广告的效果怎么实现呢?今天我们就带大家来操作一下。用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||'ease-out';
        
         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 'linear':
                                               var cur = start[name]+dis[name]*n/count;
                                               break;
                                     case 'ease-in':
                                               var a = n/count;
                                               var cur = start[name]+dis[name]*Math.pow(a,3);
                                               break;
                                     case 'ease-out':
                                               var a = 1-n/count;
                                               var cur = start[name]+dis[name]*(1-Math.pow(a,3));
                                               break;
                            }
                            if(name=='opacity'){
                                     obj.style.opacity = cur;
                                     obj.style.filter = 'alpha(opacity:'+cur*100+')';
                            }else{
                                     obj.style[name] = cur+'px';
                            }
                   }
                   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 = '-200px';
                                     oS.style.top = 0;
                                     break;
                            case 1:
                                     //下
                                     oS.style.left = 0;
                                     oS.style.top = '200px';
                                     break;
                            case 2:
                                     //右
                                     oS.style.left = '200px';
                                     oS.style.top = 0;
                                     break;
                            case 3:
                                     //上
                                     oS.style.left = 0;
                                     oS.style.top = '-200px';
                                     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('li');
         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>

相信看了以上代码你已经清楚了这种穿墙广告的奥秘。更多精彩请关注其它相关文章!

相关阅读:

HTML怎么实现数字焦点图轮播代码

CSS网页错位怎么处理

利用CSS3怎么做出不规则图片的切换特效制作

以上就是CSS3里怎么实现首页穿墙广告效果的详细内容,更多请关注其它相关文章!

上一篇:

下一篇: