Ying Caiyi's js essay (js picture switching effect)_image special effects-JS Tutorial-php.cn

Ying Caiyi's js essay (js picture switching effect)_image special effects

WBOY

Release： 2016-05-16 18:04:01

Original

1354 people have browsed it

For a partner's page effect, when the mouse is placed on the picture, it will change color. It is originally a simple color change effect, but the problem is that the height and width of the picture are not the same size.

This is more troublesome. If you put the picture in the background, you have to define the containers outside the picture one by one. It requires writing a lot of cascading styles, which is too troublesome. In the end, I decided to half the height of the picture. , and the width of the image is assigned to the container outside it

Then the image was processed as follows:

When the mouse moves over the picture, move it up 30 pixels, and move it back to its original position.
The html code is as follows:

Copy code The code is as follows:

Partners

< a href="#">

The css is as follows: (Because of future skin changes, the color and structure are written separately)

Copy code The code is as follows:

 
/*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 is as follows:

Copy code The code is as follows:

 
//Partner color changing effect
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"; 
} 
} 
} 