实现JS标签切换效果【CSS图片切换】
2010-12-01 16:48
1266 查看
运行代码尝试,我把整篇的CSS文件内容都弄上来了,难得去找具体内容了,反正能得到效果就可以了。
代码
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现标签切换效果 </title> </head> <style type="text/css"> *{ margin:0 auto; padding:0; } body{ font-size: 12px; font-family:Arial; color:#000; background:#fff url(body.gif) top repeat-x; text-align:center; height:843px; } #wrapper { width:1024px; padding:0px; margin: 0px auto; text-align:left; height:180px; } #wrappertion{ width:1024px; height:123px; padding-left:200px; } #header { height:180px; overflow:hidden; color: #f4e9d3; width:100%; float:left; } #headtop { height:13px; margin: 0 auto; } #mainWrapper { width:800px; margin:0 auto; clear:both; } #websiteLogo { float: left; margin:7px 5px; width:200px; height:161px; } #head_r{ float:left; margin-right:0px; width:750px; } #zhongjian{ width:750px; height:110px; margin-left: 0px; } .logo { width:161px; height:146px; overflow:hidden; } #kouhao{ width:450px; float:left; margin-left:15px; margin-top:40px; } #dianhua{ float:right; margin-top:9px; } #shoucang{ float:right; } #shoucang a{ font-size:12px; color:#FF9900; text-decoration:none; } #daohang{ font-size:14px; color:#FFCC00; } #footer{ height:80px; width:1024px; } #foot_l{ height:60px; width: 80px; padding-top:5px; float:left; display:inline; } #foot_l img{ float:righr; } #copyriht{ width:680px; height:40px; font-family:"黑体"; color:#FFFFFF; float:left; margin-top:30px; margin-left:5px; } #copyright .cp_a{ } #copyright .cp_b{ } #bottMenu{ margin:0 20px; height:20px; width:500px; text-align:center } #bottMenu li{ height:15px; list-style:none; float:left; margin:2px 5px; } #bottMenu li a{ text-decoration:none; color:#FFFFFF; font-size:12px; } #content{ height:540px; width:1024px; padding:0px; margin: 0 auto; text-align:left; } #topmenu{ height:50px; width:777px; } #main{ height:500px; width:400px; padding:0px; margin: 0px auto; float:left; } .pic{ height:300px; } .pic_a{ margin-left:20px; } .pic_b{ margin-left:60px; margin-top:20px; } .pic_c{ margin-left:100px; margin-top:20px; } .scroll_main{ height:100px; width:399px; margin-top:20px; } .scroll_a{ background-image:url(pic6.gif); background-position:400px; } #xnav{ width:600px; height:500px; float:left; background-color:#D09511; } #xnav_pp { width:600px; height:205px; padding-bottom:0px; } #back_zs{ width:230px; height:195px; background-image:url(pic_zs.gif); float:left; } #back_zs_t{ height:165px; width:227px; margin-top:30px; } #xnav_z{ height:205px; width:282px; float:left; margin:0px auto; } #dnav{ width:315px; margin-right:0; padding-top:5px; padding-bottom:0px; height:195px; } #subnav{ float:left; width:85px; height:195px; background-image:url(pic9.gif); } .s1{display:block;} .s2{display:none;} .subnav_ms{ width:80px; height:37px; float:left; } .subnav_ms img{ margin:12px 0 0 12px; } .subnav_hb{ width:80px; height:37px; float:left; } .subnav_hb img{ margin:15px 0 0 12px; } .subnav_yh{ width:80px; height:37px; float:left; } .subnav_yh img{ margin:15px 0 0 12px; } .subnav_hy{ width:80px; height:37px; float:left; } .subnav_hy img{ margin:15px 0 0 12px; } .subnav_cl{ width:80px; height:37px; float:left; } .subnav_cl img{ margin:17px 0 0 26px; } #back_news{ background-color:#922424; height:30px; margin-top:10px; margin-left:5px; border-top-style:double; border-bottom-style:double; border-color:#CEA677; size:12px; } #back_size{ font-size:15px; color:#FFFFFF; padding:5px 0 5px 35px; } #column{ height:300px; width:600px; } #column_z{ height:300px; } #column_size{ font-size:15px; color:#FFFFFF; padding:5px 0 5px 35px; margin-top:0; } #column_cy { background-color:#922424; height:30px; margin-left:5px; border-top-style:double; border-bottom-style:double; border-color:#CEA677; size:12px; } #column_news { width:600px; height:200px; background-image:url(11.gif); padding-top:60px; padding-left: 11px; } .huiyi{ width:200px; height:200px; float: left; } .picg_a{ width: 168px; height: 100px; float: left; margin-left:4px; } .picg_b{ width: 168px; height: 100px; float: left; margin-left:5px; } .picg_c{ width: 168px; height: 100px; float: left; margin-left:5px; } .canyin{ width:200px; height:200px; float: left; } .chalou{ width:200px; height:200px; float: left; } .ab_content{ height:100px; width:155px; float:left; margin:12px 0 0 12px; } .ab_content a{ color:#775203; text-decoration:none; font-family:"宋体"; } </style> <body> <div id="xnav"> <div id="xnav_pp"> <div id="xnav_z"> <div id="back_news"> <div id="back_size"> </div> </div> <div id="news"></div> </div> <div id="dnav"> <div id="back_zs"> <div id="back_zs_t"> <div id="Info_11" class="s1"><img src="http://a3.att.hudong.com/07/76/01200000033329115477630530907.jpg" height="160px" width="227px"/></div> <div id="Info_12" class="s2"><img src="http://cimg2.163.com/catchimg/20100225/7ONQ2K7N_1.jpg" height="160px" width="227px"/></div> <div id="Info_13" class="s2"><img src="http://www.feizl.com/upload2007/2008_11/08112419218785.jpg" height="160px" width="227px"/></div> <div id="Info_14" class="s2"><img src="http://img.bimg.126.net/photo/OKHq2WTgFfUw7O0-3H6u0Q==/5128192600692022719.jpg" height="160px" width="227px"/></div> <div id="Info_15" class="s2"><img src="http://games.qq.com/images/netgame/2008/07/18/addie/s/16.jpg" height="160px" width="227px"/></div> </div> </div> <div id="subnav" onmouseover="this.calssName='subnav'" > <div id="channel11" class="subnav_ms" onmouseover="ChangeChannel(1,1);">1111111</div> <div id="channel12" class="subnav_ms" onmouseover="ChangeChannel(1,2);">22222222</div> <div id="channel13" class="subnav_ms" onmouseover="ChangeChannel(1,3);" >33333333</div> <div id="channel14" class="subnav_ms" onmouseover="ChangeChannel(1,4);">444444444</div> <div id="channel15" class="subnav_ms" onmouseover="ChangeChannel(1,5);">6666666</div> </div> </div> </div> </div> <script type=text/javascript> //获取对象名称函数 // function getObj(objName){return(document.getElementById(objName));} </script> <script type=text/javascript> var num2=5; function ChangeChannel(module,orderid){ for(var i=1;i<=num2;i++) { getObj("Channel"+module+i).className="subnav_ms"; if (orderid>1) { getObj("Channel"+module+1).className="subnav_ms"; } if (orderid<5) { Tempid=orderid+1 getObj("Channel"+module+Tempid).className="subnav_ms"; } getObj("Info_"+module+i).className="s2"; } getObj("Channel"+module+orderid).className="subnav_ms"; getObj("Info_"+module+orderid).className="s1"; } </script> </body> </html>
相关文章推荐
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- JS+DIV+CSS实现的经典标签切换效果代码
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- js实现单张图片平移切换效果
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- js简单实现图片切换效果
- js实现索引图片切换效果
- js(JavaScript)实现TAB标签切换效果的简单实例
- JS实现FLASH幻灯片图片切换效果的方法
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- js+css实现tab菜单切换效果的方法
- Js实现类似图片相册左右切换效果
- js + css实现标签内容切换功能(实例讲解)
- JS实现两张图片卷轴的切换效果
- 基于cssSlidy.js插件实现响应式手机图片轮播效果
- 纯js实现背景图片切换效果代码
- DIV+JS+CSS实现点击弹出图片效果