admin 管理员组

文章数量: 1086866

网页特效之筋斗云

效果：当鼠标移动到导航栏的一项菜单时，云彩背景跟着移动，鼠标离开则返回第一项菜单;当有点击事件发生时，云彩停留在点击的那项菜单，再次移动到其他项菜单时，鼠标离开返回到上一个发生点击的那项菜单。
关键知识：setInterval(),offsetLeft,position定位

具体代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>筋斗云</title><style type="text/css">*{margin: 0;padding: 0;}body {background-color: #ccc;}a{text-decoration: none;}.box {width: 600px;height: 42px;background:url(images/rss.png) no-repeat right center #fff;margin: 100px auto;border-radius: 5px;position: relative;}.cloud {width: 83px;height: 42px;position: absolute;top: 0;left: 0;background: url(images/cloud.gif);}.box ul{position: absolute;list-style: none;}.box ul li{float: left;width: 83px;height: 42px;text-align: center;line-height: 42px;color: #000;cursor: pointer;}</style>
</head>
<body><div class="box"><span class="cloud" id="cloud"></span><ul id="menu"><li>师资力量</li><li>师资力量</li><li>师资力量</li><li>师资力量</li><li>师资力量</li><li>师资力量</li></ul></div>
</body>
<script type="text/javascript">
var cloud = document.getElementById('cloud');
var menu = document.getElementById('menu');
var lis = menu.children;
var current = 0;//用于存放鼠标点击后的offsetLeft值
// console.log(lis);
for(var i=0;i<lis.length;i++){lis[i].onmouseover = function(){// console.log(this.offsetLeft);target = this.offsetLeft;//得到与ul盒子的左侧距离并赋给target}lis[i].onmouseout = function(){target = current;//如果有点击事件发生，则返回到上一个点击的li,没有则返回第一个}lis[i].onclick = function(){current = this.offsetLeft;}
}//减速运动
var leader = 0,target = 0;
setInterval(function(){leader = leader + (target - leader)/10;cloud.style.left = leader + 'px';
},10)
</script>
</html>

具体效果可见：筋斗云

本文标签： 网页特效之筋斗云

版权声明：本文标题：网页特效之筋斗云 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688027652a170491.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。