亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

映彩衣的js隨筆(js圖片切換效果)

 更新時(shí)間：2011年07月31日 23:22:57   作者：  
最近寫的一個(gè)關(guān)于圖片切換的js，拿出來(lái)和大家分享一下

一個(gè)合作伙伴的頁(yè)面效果，鼠標(biāo)放到 圖片上要變成彩色，本來(lái)就是一個(gè)簡(jiǎn)單的換色效果，但問(wèn)題是，圖片的高度和寬度不是一樣大的。

這就比較麻煩了。如果把圖片放到背景里就要一個(gè)一個(gè)的去定義圖片外面的容器<a></a>，要多寫很多層疊樣式，太麻煩，最后我決定，把圖片的高度的一一半，和圖片的寬度賦值給它外面的容器<a></a>

然后把圖片做了如下處理：

當(dāng)鼠標(biāo)移動(dòng)到圖片上讓他向上移動(dòng)30個(gè)像素，移開(kāi)則回到原位。
html代碼如下：

復(fù)制代碼 代碼如下:

<!--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如下：（因?yàn)榭紤]到未來(lái)?yè)Q膚所以顏色和結(jié)構(gòu)分開(kāi)來(lái)寫）
復(fù)制代碼 代碼如下:

/*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如下：
復(fù)制代碼 代碼如下:

//合作伙伴變色效果
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";
}
}
}

相關(guān)文章

最新評(píng)論