标题跟随效果

css、html

	 <style>
        *{margin: 0; padding: 0;}
        ul {list-style:none;}
        body {
            background-color: #000;
        }
        .nav {
             800px;
            height: 42px;
            background:url() no-repeat right center #fff;
            margin: 100px auto;
            border-radius: 5px;
            position: relative; 
        }
        .cloud {
             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;
             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>

<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>