当前位置： 移动技术网 > IT编程>网页制作>Html5 > 标题跟随效果

标题跟随效果

2019年11月22日  | 移动技术网IT编程  | 我要评论

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>

　　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网