0
点赞
收藏
分享

微信扫一扫

Javascript特效:天猫导航

吓死我了_1799 2022-03-12 阅读 40
htmlsedi++


知识点


  1. 使用offsetLeft,父标签必须有定位
  2. 标签.children可以获得子标签数组
  3. 鼠标进入:mouseover
  4. 鼠标点击:mousedown
  5. 鼠标离开:mouseout

运行效果


  1. 初始状态
    Javascript特效:天猫导航_html
  2. 在不同栏目运动图标会移动
    Javascript特效:天猫导航_html_02
  3. 点击图标固定
  4. 离开后会返回上一次点击的位置

代码

<!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="../../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load', function (ev) {
// 1. 获取需要的标签
var nav = myTools.$('nav'), t_mall = nav.children[0], ul = nav.children[1], 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>



举报

相关推荐

JavaScript网页特效

0 条评论