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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
jquery操作angularjs对象
Jun 26 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php mysql数据库操作分页类
2008/06/04 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
五一促销活动总结
2014/07/01 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
自主招生学校推荐信
2014/09/26 职场文书
外国人来华邀请函
2015/01/31 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript