一个合作伙伴的页面效果，鼠标放到 图片上要变成彩色，本来就是一个简单的换色效果，但问题是，图片的高度和宽度不是一样大的。 这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器<a></a>，要多写很多层叠样式，太麻烦，最后我决定，把图片的高度的一一半，和图片的宽度赋值给它外面的容器<a></a> 然后把图片做了如下处理： 当鼠标移动到图片上让他向上移动30个像素，移开则回到原位。html代码如下： 复制代码 代码如下: <!--partner_box--> <div class="partner_box"> <div class="partner_list"> <div class="partner_listright"> <div class="parter_content"> <h2>合作伙伴</h2> <div id="box_list"> <a href="#"><img src="auto_navi/images/samsung_icon3.png"/></a> <a href="#"><img src="auto_navi/images/motorola_cion3.png"/></a> <a href="#"><img src="auto_navi/images/lenovo_icon3.png"/></a> <a href="#"><img src="auto_navi/images/dell_icon3.png"/></a> <a href="#"><img src="auto_navi/images/zte_icon3.png"/></a> <a href="#"><img src="auto_navi/images/philips_icon3.png"/></a> <a href="#"><img src="auto_navi/images/oppo_icon3.png" /></a> <a href="#"><img src="auto_navi/images/sharp_icon3.png"/></a> <a href="#"><img src="auto_navi/images/jkwap_icon3.png"/></a> </div> </div> </div> </div> </div> <!--partner_box end--> css如下：（因为考虑到未来换肤所以颜色和结构分开来写） 复制代码 代码如下: /*partner*/ .partner_box { height:112px; padding-top:20px; } .partner_box .partner_list { width:910px; height:93px; margin:0 auto; } .partner_box .partner_list h2 { text-align:center; height:30px; line-height:30px; } .partner_box .partner_list #box_list { margin-top:15px; } .partner_box .partner_list #box_list a { margin-left:13px; display:inline-block; height:31px; float:left; overflow:hidden; } /*.partner_box*/ .partner_box{background:url(../images/partner_box_bc.jpg) repeat-x;} .partner_list{background:url(../images/friend_icon.png) 0% 0% no-repeat;} .partner_list .partner_listright{ background:url(../images/friend_icon_right.png) 100% 0% no-repeat;} .partner_list .partner_listright .parter_content{background:url(../images/friend_icon_midibe.png) repeat-x; margin:0px 8px 0px 9px; height:93px;} .partner_box .partner_list h2{ font-size:14px;border-bottom:1px dashed #999999; color:#0f0f0f;} javascript如下： 复制代码 代码如下: //合作伙伴变色效果 window.onload=function(){ friend(); } function friend(){ if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.getElementById("box_list")) return false; var footer=document.getElementById("box_list"); var img_list=footer.getElementsByTagName("img"); for(var i=0; i<9;i++){ //var img_h=img_list[i].clientHeight; var img_w=img_list[i].clientWidth; // img_list[i].parentNode.style.height="31px"; img_list[i].parentNode.style.width=img_w+"px"; img_list[i].parentNode.style.position="relative"; img_list[i].style.position="absolute"; img_list[i].style.top="0px"; img_list[i].style.left="0px"; img_list[i].onmouseover=function(){ this.style.top="-35px"; } img_list[i].onmouseout=function(){ this.style.top="0px"; } } }

　　推荐阅读

　　推荐11款jQuery开发的复选框和单选框美化插件

作者：Chris Spooner翻译：Terry li - GBin1.com英文： jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的，因为不同的浏览器及其操作系统对于样>>>详细阅读

本文标题：映彩衣的js随笔(js图片切换效果)

地址：http://www.17bianji.com/kaifa2/JS/24317.html

 1/2    1