标题跟随效果
css、html
<style>
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
width: 800px;
height: 42px;
background:url() 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(yun.jpg) no-repeat; */
background:red;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
}
.nav li {
float: left;
width: 88px;
height: 42px;
line-height: 42px;
text-align: center;
color: #000;
cursor: pointer;
}
</style>
<body>
<div class="nav" id="nav">
<span class="cloud" id="cloud"></span>
<ul id="box">
<li>首页新闻</li>
<li>齐天大圣</li>
<li>九耀星君</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上官飞燕</li>
<li>司马玉龙</li>
</ul>
</div>
</body>
js
<script>
var list = document.getElementsByTagName("li");
var cloud = document.getElementById("cloud");
var timer = null;
function move(obj,target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target - obj.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(target == obj.offsetLeft){
clearInterval(timer);
return
}
obj.style.left = obj.offsetLeft + speed + "px";
},30)
}
var cur = 0;//云初始的位置
for(var i = 0; i < list.length; i++){
list[i].onmouseover = function(){
move(cloud,this.offsetLeft);
}
list[i].onmouseout = function(){
move(cloud,cur);
}
list[i].onclick = function(){//改变云彩的初始位置；
cur = this.offsetLeft;
}
}
</script>
