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对html元素取值与赋值的方法
Nov 20 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
原生JavaScript实现轮播图
Jan 10 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP 字符串 小常识
2009/06/05 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
Python 深入理解yield
2008/09/06 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
python flask安装和命令详解
2019/04/02 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
项目资料员岗位职责
2013/12/10 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
函授药学自我鉴定
2014/02/07 职场文书
幼儿园新年寄语
2014/04/03 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
大学生团员个人总结
2015/02/14 职场文书
大学生求职意向书
2015/05/11 职场文书
甲午风云观后感
2015/06/02 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS