js_day25--js DOM编程（style对象之 坦克大战转向+切换菜单效果）
2014-03-23 16:11
691 查看
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;
}
类似的，还可以基于此方法实现树状展开和收起的效果：
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="上" onclick="change(this)"/>
<input type="button" value="右" onclick="change(this)"/>
<input type="button" value="下" onclick="change(this)"/>
<input type="button" value="左" onclick="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" onmouseover="change('zs')">招生</li>
<li id="rzli" onmouseover="change('rz')">热招</li>
<li id="cgli" onmouseover="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;
}
类似的，还可以基于此方法实现树状展开和收起的效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS+CSS实现自动切换的网页滑动门菜单效果代码
- 韩顺平 javascript教学视频_学习笔记31_随意拖拽窗口案例_dom对象（style对象）_坦克大战1.0版
- JS-11/10_HTML DOM Style 对象
- js_day22--js DOM编程（window对象3+猜拳游戏）
- js+css tab菜单切换效果
- JS+CSS实现自动切换的网页滑动门菜单效果代码
- js_day20--js DOM编程（window对象1）
- JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)
- JS+CSS实现滑动切换tab菜单效果
- js+css实现tab菜单切换效果的方法
- js+css实现tab菜单切换效果的方法
- js模拟QQ面板拖拽效果及状态切换效果（DOM事件）
- JS+CSS实现滑动切换tab菜单效果
- JS DOM编程 window对象
- JS对象字面值编程--动态DOM框架例子
- js_day26--js DOM编程（forms/form对象+table对象）
- js_day21--js DOM编程（window对象2）
- js_day24--js DOM编程（document+body对象）
- dom03 子元素实现菜单切换效果