js进阶之天猫弹性导航

主要是对offset家族进行巩固
思路：

获取所需要的标签
遍历
监听鼠标进入的事件
监听鼠标点击的事件
监听鼠标离开的事件
缓动动画（公式：开始值 = 开始值+（结束值-开始值）*缓动系数
代码如下

    <style>*{margin: 0;padding: 0;list-style: none;}body{background-color: pink;}#nav{width:920px;height:70px;margin:100px auto;background: url("img/doubleOne.png") no-repeat right center #fff;border-radius: 5px;position: relative;}#nav ul{           position: relative;}#nav ul li{width:88px;height:70px;text-align: center;line-height: 70px;float:left;position: relative;cursor: pointer;}#t_mall{position: absolute;width:88px;height:70px;background: url("img/tMall.png") no-repeat;}</style>
</head>
<body><div 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></div><script>window.onload = function (){//1.获取需要的标签var nav = document.getElementById("nav");var t_mall = nav.children[0];var ul = nav.children[1];var allLis = ul.children;//记录鼠标获取的位置var beginX = 0;//2.遍历for(var i = 0; i < allLis.length; i++){var li = allLis[i];//2.1监听进入事件li.onmouseover = function (){var offsetLeft = this.offsetLeft;end = offsetLeft;}//2.2监听事件按下li.onmousedown = function (){beginX = this.offsetLeft;}//2.3监听事件离开li.onmouseout = function (){end = beginX;}}//缓慢动画var begin = 0, end = 0;setInterval(function() {//公式：起始值 = 起始值 +（结束值 - 起始值）*缓动系数begin = begin +(end-begin) * 0.1;t_mall.style.left = begin + 'px';}, 10);}</script>

其中需要注意的事情就是：

要知道缓动动画的公式，然后明白它运行的原理还有offsetLeft的原理。
当鼠标按下的时候，天猫图标的距离应该是等于一开始顶下的最开始的左边距离。

js进阶之天猫弹性导航相关推荐

jQuery天猫商品分类导航菜单
jQuery天猫商品分类导航菜单一.HTML模块相关源码 HTML文件:index.html <!DOCTYPE html> <html><head><me ...
html 天猫上拉切换,jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单 ...
js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现一.总结一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）...
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡一.总结一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览源码下载部分代码: <div class=&quo ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些一.总结一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

js进阶之天猫弹性导航

js进阶之天猫弹性导航相关推荐

最新文章

热门文章