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



Day25

• style对象

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

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

   

   

• 坦克转向

   1.做4个图片

    src=”??”

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

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

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

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

可以看看运行效果：

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

• 仿soho菜单切换

如下运行效果：

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

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

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