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


Posted in Javascript onMarch 08, 2017

效果图:

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>

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

Javascript 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
JavaScript类型相关的常用操作总结
Feb 14 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 #Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 #Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 #Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 #Javascript
原生js实现选项卡功能
Mar 08 #Javascript
js, jQuery实现全选、反选功能
Mar 08 #Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 #Javascript
You might like
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
经典团队口号
2014/06/06 职场文书
60句有关成长的名言
2019/09/04 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
python实现简单的聊天小程序
2021/07/07 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL