jquery+css打造标签滑动门

时间：2017-06-13

js实例如下：

<html>
 <head>
  <title> www.phpddt.com-关注php和web开发 </title>
  <meta charset="utf-8">
  <style>
		ul,li{
			margin:0px;
			padding:0px;
			list-style:none
		}
		li{
			float:left;
			background-color:#8c6239;
			color:white;
			padding:5px;
			margin-right:2px;
			border:1px solid white;
		}
		li.myLi{
			background-color:#ea5500;
			border:1px solid #ea5500;
		}
		div{
			clear:left;
			background-color:#ea5500;
			color:white;
			width:300px;
			height:100px;
			padding:10px;
			display:none;
		}
		div.myDiv{
			display:block;
		}
  </style>
  <script src="./jquery-1.7.1.min.js"></script>
  <script>
	var timeId;
	$(document).ready(function(){
		$("li").each(function(index){
			//index是li数组的的索引值
			$(this).mouseover(function(){
				var liNode = $(this);
				//延迟是为了减少服务器压力，防止鼠标快速滑动
				timeId = setTimeout(function(){
					//将原来显示的div隐藏掉
					$("div.myDiv").removeClass("myDiv");
					//将原来的li的myLi去掉
					$("li.myLi").removeClass("myLi");
					//显示当前鼠标li的对应的div
					$("div").eq(index).addClass("myDiv");
					//增加当前li的myLi
					liNode.addClass("myLi");
				},300);
			}).mouseout(function(){
				clearTimeout(timeId);
			});
		});
	});
  </script>
 </head>
 <body>
  <ul>
		<li class="myLi">this is li 1</li>
		<li>this is li 2</li>
		<li>this is li 3</li>
  </ul>
  <div class="myDiv">this is div1</div>
  <div>this is div2</div>
  <div>this is div3</div>
 </body>
</html>

以上js代码就是简单滑动门的实现，你可以在此基础上进行改造，代码解释已经很明确！

js代码运行结果如下：

上一条：javascript面向对象实例属性和实例方法 下一条:js中日期和时间对象详解

jquery+css打造标签滑动门

相关文章

最新文章