您的位置：首页 > Web前端 > JavaScript

JavaScriptDOM练习之筋斗云效果

2017-10-08 00:04 357 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}

ul {
list-style: none
}

body {
background-color: #333;
}

.nav {
width: 800px;
height: 42px;
margin: 100px auto;
background: url(images/rss.png) right center no-repeat;
background-color: #fff;
border-radius: 10px;
position: relative;
}

.nav li {
width: 83px;
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}

.nav span {
position: absolute;
top: 0;
left: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}

ul {
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<span id="cloud"></span>
<ul id="navBar">
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
<li>武汉校区</li>
<li>关于我们</li>
<li>联系我们</li>
<li>招贤纳士</li>
</ul>
</div>
<script src="common.js"></script>
<script>
var list = my$("navBar").children;
for(var i=0; i<list.length; i++){
list[i].onclick = clickHandle;
list[i].onmouseover = mouseoverHandle;
list[i].onmouseout = mmouseoutHandle;
}

var index = 0;
function clickHandle() {
index = this.offsetLeft;
}
function mouseoverHandle() {
animate(my$("cloud"), this.offsetLeft);
}
function mmouseoutHandle() {
animate(my$("cloud"), index);
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScriptDOM练习之筋斗云效

相关文章推荐

新的分享

章节导航