<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;border:0;list-style: none;}
body{background-color: pink;}
#nav{
width: 900px;height: 63px;
background:url("images/doubleOne.png") no-repeat right
center #fff;
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("images/tMall.png") no-repeat;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>
<script src="MyTool/MyTool.js"></script>
<script>
window.addEventListener('load', function (ev) {
// 1. 获取需要的标签
var nav = myTool.$('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.addEventListener('mouseover', function () {
end = this.offsetLeft;
});
// 2.2 监听鼠标按下事件
li.addEventListener('mousedown', function () {
beginX = this.offsetLeft;
});
// 2.3 监听鼠标离开事件
li.addEventListener('mouseout', function () {
end = beginX;
});
}
// 3. 缓动动画
var begin = 0, end = 0;
setInterval(function () {
begin += (end - begin) * 0.2;
t_mall.style.left = begin + 'px'
}, 10);
});
</script>
</body>
</html>
