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 相关文章推荐
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
easyui validatebox验证
Apr 29 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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
用PHP产生动态的影像图
2006/10/09 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JS实现div居中示例
2014/04/17 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python 爬虫的工具列表大全
2016/01/31 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python 日期排序的实例代码
2019/07/11 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
zooplus意大利:在线宠物商店
2019/08/07 全球购物
总经理助理的八要求
2013/11/12 职场文书
研究生毕业鉴定
2014/01/29 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
颐和园的导游词
2015/01/30 职场文书
飞屋环游记观后感
2015/06/08 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS