js_day25--js DOM编程（style对象之坦克大战转向+切换菜单效果）-CSDN博客

本文链接：https://blog.csdn.net/gavin_john/article/details/21874243

Day25

style对象

style对象表示当前元素的样式设置

style对象不是针对某一个html元素，而是所有的html元素而言的，也就是说，我们可以通过document.getElementById(“id”).style.property=”值”，来控制网页文档的任何一个元素（对象）的样式，当然这个是很重要的。

坦克转向

1.做4个图片

src=”??”

每次转向都加载一个不同的图片，但这样比较耗内存和资源。

2.一次加载一个背景图，通过显示该背景图的不同部分，实现转向的效果。

这里有一个比较重要的style对象的属性，background-position-y或background-position-x，该属性可以从一张图片的指定像素开始加载指定高度或宽度的图片作为背景，那么坦克大战中的四个方向的坦克就不需4张不同的图片，而是只需要一张图片，通过加载不同的部分即可。如下坦克图片：

四个方向为纵向排列，从不同像素开始加载，就可以分别得到四个不同的方向的坦克。示例如下：

<html>
	<head>
		<title>day_25_1</title>
		<script language="javascript" type="text/javascript">
		<!--
			function $(id){
				return document.getElementById(id);	
			}
			
			function change(obj){
				var tank = $("tank");
				switch(obj.value){
					case "上":	tank.style.backgroundPositionY="65px";break;
					case "右":	tank.style.backgroundPositionY="130px";break;
					case "下":	tank.style.backgroundPositionY="0px";break;
					case "左":	tank.style.backgroundPositionY="-65px";break;
					default:break;
				}
			}
		
			//>
		</script>	
	</head>	
	<body>
		<div id="tank" style="background-position-y:0px;background-image:url(tank.png);width:63px;height:68px;"></div>
		<input type="button" value="上" οnclick="change(this)"/>
		<input type="button" value="右" οnclick="change(this)"/>
		<input type="button" value="下" οnclick="change(this)"/>
		<input type="button" value="左" οnclick="change(this)"/>
	</body>
</html>

可以看看运行效果：

通过不同的按钮加载不同部位的背景图，就可以实现转向效果。

仿soho菜单切换

如下运行效果：

鼠标移动到左侧不同部位时，右侧出现不同的内容，这在很多网站都有运用。这里右侧其实是3个不同的div块，用javascript的onmouseover对左侧的列表进行监听，然后在右侧切换不同的div显示内容即可。示例源码如下：

HTML:

<html>
	<head>
		<title>仿sohu的div切换</title>
		<link rel="stylesheet" href="sohu.css" type="text/css"/>
		<script language="javascript" type="text/javascript">
		<!--
			function change(val){
				if(val=="zs"){
					zsli.style.backgroundColor="#ffc12d";
					rzli.style.backgroundColor="silver";
					cgli.style.backgroundColor="silver";
					zs.style.display="block";
					rz.style.display="none";
					cg.style.display="none";
				}else if(val == "rz"){
					rzli.style.backgroundColor="#ffc12d";
					zsli.style.backgroundColor="silver";
					cgli.style.backgroundColor="silver";
					rz.style.display="block";
					zs.style.display="none";
					cg.style.display="none";
				}else if(val == "cg"){
					cgli.style.backgroundColor="#ffc12d";
					rzli.style.backgroundColor="silver";
					zsli.style.backgroundColor="silver";
					cg.style.display="block";
					zs.style.display="none";
					rz.style.display="none";
				}	
			}
		
			//>
		</script>	
	</head>	
	<body>
			<div class="div1">
				<div class="navi" >
					<ul>
						<li id="zsli" οnmοuseοver="change('zs')">招生</li>	
						<li id="rzli" οnmοuseοver="change('rz')">热招</li>	
						<li id="cgli" οnmοuseοver="change('cg')">出国</li>	
					</ul>	
				</div>	
				<!--超链接div-->
				<div id="zs" class="zs">
					<ul>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
						<li><a href="#">招生招生招生招生</a></li>
					</ul>	
				</div>
				<div id="rz" class="rz">
					<ul>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
						<li><a href="#">热招热招热招热招</a></li>
					</ul>	
				</div>
				<div id="cg" class="cg">
					<ul>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
						<li><a href="#">出国出国出国出国</a></li>
					</ul>	
				</div>
			</div>
	
	</body>
</html>

CSS:

body{
	font-size:12px;	
}
.div1{
	width:126px;
	height:156px;
	
}
.navi{
		width:21px;
		height:156px;
		/*background-color:silver;*/
		float:left;
}
.navi ul{
	padding:0px;
	margin:0px auto;	
	float:left;
}
.navi li{
	text-align:center;
	list-style-type:none;	
	height:40px;
	width:21px;
	margin-top:3px;
	float:left;
	background-color:silver;
	padding-top:8px;
}
.zs,.rz,.cg{
	width:101px;
	height:156px;	
	float:left;
	margin-left:4px;
}

ul{
	padding:0px;
	margin:0px auto;	
	float:left;
}

li{
	height:19px;
	font-size:12px;
	list-style-type:none;	
	line-height:19px;
}

.rz{
	display:none;	
}
.cg{
	display:none;	
}

类似的，还可以基于此方法实现树状展开和收起的效果：