- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
CSS放大图片，鼠标经过放大图片，有的人把它称为放大镜效果。实现方法是：先定义一个图片列表，可以不设置图片的长宽，此时图片默认显示大小，然后定义此图片hover属性，也就是鼠标放上后的变化，这里我们定义图片的长宽要稍大于图片原始大小，这样这种功能就完成了，具体请看代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1889/xhtml"> <head> <title>CSS图片放大镜效果</title> <style type="text/css"> body{margin:0;padding:0;} ul#bigs{ LIST-STYLE-TYPE: none;DISPLAY:inline; margin: 0px; clear: both; } ul#bigs li{ FLOAT: left; display: inline; margin-top: 9px; margin-left: 8px; } ul#bigs li a { display: block;width:116px; } ul#bigs li a img{ border:1px #666 solid; } ul#bigs li a:hover{ position: absolute; z-index:100; margin: -8px; } ul#bigs li a:hover img{ width:138px; height:107px; border:1px #ccc solid; } </style> </head> <body> <div> <ul id="bigs"> <li><a href="/"><img src="http://p1.mb5u.com/texiao/1/20110225160446173.jpg" /></a></li> <li><a href="/"><img src="http://p1.mb5u.com/texiao/1/20110225160446174.jpg" /></a></li> <li><a href="/"><img src="http://p1.mb5u.com/texiao/1/20110225160446175.jpg" /></a></li> </ul> </div> </body> </html>
所属频道：图片特效特效/更新时间：2012-12-30