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

js仿拉勾网首页穿墙广告效果

程序员文章站 2022-07-22 09:01:13
效果图: 代码如下:

效果图:

js仿拉勾网首页穿墙广告效果

代码如下:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!