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

 

#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

转载于:https://www.cnblogs.com/sliuqin/archive/2007/12/03/1018819.html