Ying Caiyi의 js 에세이(js 그림 전환 효과)_이미지 특수 효과

파트너 페이지 효과는 사진에 마우스를 올리면 색상이 바뀌는 현상인데 원래는 단순한 색상 변경 효과인데, 문제는 사진의 높이와 너비가 같은 크기가 아니라는 점입니다.

이게 더 귀찮네요. 배경에 그림을 넣으려면 그림 외부의 컨테이너를 하나씩 정의해야 하는데, 캐스케이딩 스타일을 많이 작성해야 하는데 너무 번거로워서 결국 그림 높이를 절반으로 결정했습니다. , 이미지의 너비는 그 외부의 컨테이너에 할당됩니다

그런 다음 이미지는 다음과 같이 처리되었습니다.

사진 위로 마우스를 이동하면 위로 30픽셀 이동한 후 다시 원래 위치로 이동합니다.
html 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

파트너

img src=" auto_navi/images/samsung_icon3.png"/> < a href=" #">

<--partner_box end-->

CSS는 다음과 같습니다. 색상과 구조는 별도로 작성합니다)

코드 복사 코드는 다음과 같습니다.

/* 파트너*/
.partner_box { 높이:112px; padding-top:20px; }
.partner_box .partner_list { width:910px; height:93px; margin:0 }
.partner_box .partner_list h2 { text-align:center; 높이:30px }
.partner_box .partner_list #box_list { margin-top:15px }
.partner_box .partner_list #box_list a { 마진-왼쪽: 13px; 디스플레이:인라인-블록; 높이: 31px; 오버플로:숨김; }
/*.partner_box*/
.partner_box{배경:url(../images/partner_box_bc.jpg) -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% 반복 없음 ;}
.partner_list .partner_listright .parter_content{배경:url(../images/friend_icon_midibe.png) 반복-x; 여백:0px 8px 0px 9px; }
.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"); (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";
}
}
}