温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML怎么实现仿拉勾网首页穿墙广告效果

发布时间:2022-03-11 16:38:58 来源:亿速云 阅读:141 作者:iii 栏目:web开发

本篇内容主要讲解“HTML怎么实现仿拉勾网首页穿墙广告效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML怎么实现仿拉勾网首页穿墙广告效果”吧!

 代码:

<!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怎么实现仿拉勾网首页穿墙广告效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI