js实现天猫导航效果与时钟效果
分享俩个js小例子。
一，天猫导航栏
效果：鼠标移动时，红色的猫会跟着移动，点击后会停留在点击区域。
直接上代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}body{background-color: paleturquoise;}#nav{width: 900px;height: 63px;background: url('../img/tm2.png') no-repeat right;color: black;border-radius: 5px;position: relative;margin: 100px auto;}#nav ul{position: relative;}#nav ul li{float: left;width: 88px;height: 63px;text-align: center;line-height: 70px;cursor: pointer;}#t_mall{width:88px;height: 63px;background: url('../img/1.png') no-repeat;opacity: 0.8;background-size: 100% 100%;position: absolute;}</style></head><body><nav id="nav"><span id="t_mall"></span><ul><li>双11狂欢</li><li>服装会场</li><li>数码家电</li><li>家具建材</li><li>母婴童装</li><li>手机会场</li><li>美妆会场</li><li>进口会场</li><li>飞猪旅行</li></ul></nav></body><script src="../myTool/myTool.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.addEventListener('load',function () {var nav=myTool.$('nav');var t_mall=nav.children[0];var ul=nav.children[1];var alllis=ul.children;//记录鼠标点击位置var beginX=0;for(var i=0;i<alllis.length;i++){var li=alllis[i];//监听鼠标进入li.addEventListener('mouseover',function () {end=this.offsetLeft;});//监听鼠标点击li.addEventListener('mousedown',function () {beginX=this.offsetLeft;});//监听鼠标离开li.addEventListener('mouseout',function () {end=beginX;});}var begin=0,end=0;setInterval(function() {begin+=(end-begin)*0.2;t_mall.style.left=begin+'px';},10);});</script></html>
二：时钟
效果：与真实时钟一模一样的运行
代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}#box{width: 800px;height: 800px;background: url("../img/time/22.jpg") no-repeat;margin: 0 auto;padding: 10px;position: relative;}#hour,#min,#second{position: absolute;left: 48%;top: 0;width: 50px;height: 800px;margin-left:-15px;}#hour{background:url("../img/time/223.png") no-repeat center center;}#min{background:url("../img/time/222.png") no-repeat center center;}#second{background:url("../img/time/221.png") no-repeat center center;}</style></head><body><div id="box"><div id="hour"> </div><div id="min"> </div><div id="second"> </div></div></body><script type="text/javascript">window.onload=function () {var hour=document.getElementById('hour');var min=document.getElementById('min');var second=document.getElementById('second');setInterval(function () {var date=new Date();console.log(date);//getMilliseconds 得到毫秒数var datehaomai=date.getMilliseconds();var s=date.getSeconds()+datehaomai/1000;var m=date.getMinutes()+s/60;var h=date.getHours()+m/60;hour.style.transform ='rotate('+h*30+'deg)';min.style.transform = 'rotate('+m*6+'deg)';second.style.transform ='rotate('+s*6+'deg)';},100);}</script></html>```图片资源有需要请留言。感谢观看！感谢观看！感谢观看！
