Ying CaiyiのJSエッセイ（JS画像切り替え効果）_画像特殊効果

パートナーのページエフェクトは、画像の上にマウスを置くと色が変わります。本来は単純な色変更エフェクトですが、問題は画像の高さと幅が同じサイズではないことです。

これはもっと厄介です。背景に画像を置くと、画像の外側にコンテナを一つずつ定義する必要があり、面倒なので結局画像の高さの半分にしました。 、画像の幅はその外側のコンテナに割り当てられます

その後、画像は次のように処理されました:

マウスを画像上に移動したら、30 ピクセル上に移動し、元の位置に戻します。
HTML コードは次のとおりです:

コードをコピーします コードは次のとおりです:

パートナー

a href="#" auto_navi/images/ dell_icon3.png"/> < a href=" #">

CSS は次のとおりです。色と構造は別々に記述されます)

コードをコピー コードは次のとおりです:

/*パートナー*/
.partner_box { 高さ:112px; パディングトップ:20px; }
.partner_box .partner_list { 幅:910px; 高さ:0 自動; { text-align:center; height:30px; }
.partner_box .partner_list #box_list { margin-top:15px; }
.partner_list #box_list a { margin-left: 13px; 表示:インラインブロック; 高さ: 31px; オーバーフロー: 非表示; }
/*.partner_box*/
.partner_box{background:url(../images/partner_box_bc.jpg) -x;}
.partner_list{ 背景:url(../images/friend_icon.png) 0% 0% 繰り返しなし;}
.partner_list .partner_listright{ 背景:url(../images/friend_icon_right) .png) 100% 0% リピートなし ;}
.partner_list .partner_listright .parter_content{background:url(../images/friend_icon_midibe.png) リピート-x; 0px 8px 0px 9px; }
.partner_box .partner_list h2{ font-size:14px;border-bottom:1px 破線 #999999; color:#0f0f0f;}


JavaScript は次のとおりです:

コードをコピー コードは次のとおりです:

//パートナーの色変更効果

window.onload=function (){
friend();
}
関数 friends(){
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"); (var i=0; 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].style.position="absolute";
img_list[i].style.top="0px";
img_list[i].style.left="0px"; [i].onmouseover=function(){
this.style.top="-35px";
img_list[i].onmouseout=function(){
this.style.top ="0px";
}
}
}