<!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>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11198421.html
