一个合作伙伴的页面效果，鼠标放到图片上要变成彩色，本来就是一个简单的换色效果，但问题是，图片的高度和宽度不是一样大的。这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器a/a，要多写很多层叠样式，太麻烦，最后我决定，把图片的高度的一一半，和图片的宽度赋值给它外面的容器a/a然后把图片做了如下处理

当鼠标移动到图片上让他向上移动30个像素，移开则回到原位html。代码如下：复制代码代码如下：-partner _ box-div class=' partner _ box ' div class=' partner _ list ' div class=' partner _ list right ' div class=' parter _ content ' H2合作伙伴/H2 div id=' box _ list ' a href=' # ' img src=' http : auto _ Navi/images/Samsung _ icon 3。png '/a href=' # ' img src=' http : auto _ Navi/images/摩托罗拉_ cion 3。png '/a href=' # ' img src=' http : auto _ Navi/images/Lenovo _ icon 3。png '/a href=' # ' img '-partner _ box end-CSS如下：(因为考虑到未来换肤所以颜色和结构分开来写)复制代码代码如下：/*合作伙伴*/。partner _ box { height :112 xpadding-top :20 px；} .合作伙伴箱.partner _ list { width :910 px h8 :93 pxmargin 33600 auto }。合作伙伴箱.partner _ list H2 { text-align : center；高度：30 px线高：30 px} .合作伙伴箱.partner _ list # box _ list { margin-top :15 px；} .合作伙伴箱.partner _ list # box _ list a { margin-left :13 px；显示：内嵌块；高度：31pxfloat:left飞越：隐藏；} /*.partner_box*/.partner_box{background:url(./images/partner _ box _ BC。jpg)repeat-x；} .partner _ list {后台： URL(./images/friend_icon.png) 0% 0%不重复；} .合作伙伴列表partner _ list right {后台： URL(./images/friend _ icon _ right。巴布亚新几内亚)100% 0%不重复；} .合作伙伴列表合伙人名单.parter _ content {后台： URL(./images/friend _ icon _ midibe。png)重复-x；margin :0 px 8px 0px 9px three :93 px }。合作伙伴箱.partner _ list H2 { font-size :14 px；边框-底部：1px虚线# 999999;color: # 0f0f0f} javascript如下：复制代码代码如下： //合作伙伴变色效果窗户。onload=function(){ friend()；}函数friend(){ if(！document.getElementById)返回falseif(！document.getElementsByTagName)返回falseif(！文件。getelementbyid(' box _ list ')返回falsevar footer=文档。getelementbyid(' box _ list ')；var img _ list=页脚。getelementsbytagname(' img ')；for(var I=0；i9；i ){ //var img_h=img_list[i].client heightvar img _ w=img _ list[I].clientWidth//img _ list[I]。父节点。风格。高度=' 31pximg _ list[I]。ParentNode。风格。width=img _ w ' pximg _ list[I]。ParentNode。风格。位置='相对'；img _ list[I]。风格。位置='绝对'；img _ list[I]。风格。top=' 0pximg _ list[I]。风格。left=' 0pximg_list[i].onmouseover=function(){ this。风格。top='-35px '；} img_list[i].onmouseout=function(){ this。风格。top=' 0px} } }