[导入]鼠标滑过放大图片

 

#enlarge {...}{
list-style-type:none;
}
#enlarge li {...}{
display:block;
float:left;
margin:20px;
width:22px; height:18px;
position:relative;
}
#enlarge li a {...}{
display:block;
width:22px; height:18px;  /"图片原始大小"/
overflow:hidden;
position:relative;
}
#enlarge li a img {...}{
width:100%; height:100%;
border:0;
}
#enlarge li a:hover {...}{
position:absolute;
left:-20px;
top:-20px;
width:200px; height:200px;   /鼠标滑过放大后大小/
z-index:90;
}

 

页面代码:

<ul id="enlarge">
<li><a href="#"><img src="01.gif" alt="image1" />Image1</a></li>
<li><a href="#"><img src="02.gif" alt="image2" />Image2</a></li>
<li><a href="#"><img src="03.gif" alt="image3" />Image3</a></li>
</ul>

 http://bbs.blueidea.com/thread-2812683-1-1.html 这是在略缩图中滑动鼠标查看大图效果

 

文章来源:http://link-to.cn/post/2007/12/鼠标滑过放大图片.aspx