js仿拉勾网首页穿墙广告效果
程序员文章站
2022-07-22 09:01:13
效果图：
代码如下：
效果图：
代码如下：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： NumPy 数组使用大全
推荐阅读