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>

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

赞 (0)

相关推荐

  • js退弹 IE关闭时弹出广告代码,可以防止屏蔽

    在网上寻觅了很久JS退弹代码,也没有找出让人非常满意的代码.于是今天把收集的退弹代码做了一下整理,精简出一个非常短小精悍而强力的JS退弹代码,能够突破现在绝大多数浏览器的限制,包括SP2.IE6.IE7.遨游.MYIE等等. 现提供给有这方面需求的用户: 完整版24小时只弹一次的代码 复制代码 代码如下: function Get(){ var Then = new Date() Then.setTime(Then.getTime() + 24*60*60*1000) //这里是24小时,如果想

  • JS实现悬浮移动窗口(悬浮广告)的特效

    js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

  • 兼容多浏览器的JS 浮动广告[推荐]

    兼容多浏览器的JS 浮动广告[推荐]

    漂浮广告是我们经常用到的广告形式,站长的必备代码,相信你一定能用得上. JS浮动广告 img{border:0;} function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventListener){ obj.addEventListener(evtType,func,cap); return true; }else if(obj.attachEvent){ if(cap){ obj.setCapture(); re

  • js漂浮广告实现代码（合集经典） 符合W3C

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. 漂浮广告 var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("codefans_net") function float() { var L=T=0 var R= document.body.c

  • js 居中漂浮广告

    程序源码 复制代码 代码如下: var floatAd = {}; floatAd.getScrollTop = function(node) { var doc = node ? node.ownerDocument : document; return doc.documentElement.scrollTop || doc.body.scrollTop; }; floatAd.getScrollLeft = function(node) { var doc = node ? node.ow

  • 用javascript实现的仿Flash广告图片轮换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • js网页侧边随页面滚动广告效果实现

    a.scrollTop的计算: b.滚动元素的定位值计算: c.滚动周期设定: 代码如下: css部分: 复制代码 代码如下: /*测试用的高度*/ body{ height:3000px;} div,ul,li,body{margin:0; padding:0;} /*position:absolute;用于元素的定位*/ #roll{width:50px; height:100px; background:#99CC00; position:absolute;} Html代码: 复制代码 代

  • 兼容性非常好的js右下角与漂浮广告代码

    兼容ie6 7 8 ,ff3.5 3.6,chrome 4.1.2,safari 重新修正 1.滚动时抖动的问题,主要体现在ff3.6上 2.加入了ie6下的固定 3.分成了两个块,xhtml,html解析 4.随着屏幕大小而变动 兼容ie6 7 8 ff3.5 3.6 chrome 4.1.2 safari xhtml1.0解析 Untitled Document html,body{ padding:0; margin:0; } 我在随平滚 我静止不动 function scrollx(p)

  • Js右下角视频广告代码(百度视窗)

    右下角视窗 请看窗口右下角 var BD_HY_VIDEOAD={};(function(){var F={videoId:"BD_HY_VIDEOAD_"+new Date().getTime().toString().substring(5,13),bgFlashShow:0,bdLogoShow:"true",bdSmallShow:"true",bdLogo:"http://eiv.baidu.com/mapm2/0306vid

  • 又一个不错的js浮动广告代码

    var Rimifon = { "Ads" : new Object, "NewFloatAd" : function(imgUrl, strLink) { var ad = document.createElement("a"); ad.DirV = true; ad.DirH = true; ad.AutoMove = true; ad.Image = new Image; ad.Seed = Math.random(); ad.Timer

随机推荐