js实现图片显示局部，鼠标经过显示全部的效果

更新时间：2008年01月23日 23:23:49 作者：

这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果。图片开始只是局部的，鼠标放上去显示整个图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> body{ font-size:12px; } ul,li,ol{ margin:0; padding:0; list-style:none; } .box{ margin:100px; clear:both;  border:1px solid #000; } .box ul li{ list-style:none; float:left; width:60px; height:60px; margin-left:10px; text-align:center;  border:1px solid #ccc;  } .box ul li a{ display:block; background:#f2f2f2; width:60px; height:60px; overflow:hidden; } .box a img{ margin:-25px 0px 0px -25px; border:0; } .box a:hover{ width:105px; height:140px; border:4px solid #f2f2f2; margin:-40px -50px -80px -50px; padding:1px; position:relative;  }/* 设置相对定位后才能盖住后面的层 */ .box a:hover img{ margin:0; border:0;  } .clear{clear:both;overflow:hidden;height:0;} </style> </head> <body> <div class="box" id="boxImg">     <ul>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140" ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>         <li><a href="#"><img src="http://list.mp3.baidu.com/list/images/tupic/bizhi_renwu01.jpg" widt="105" height="140"  ></a></li>     </ul>     <div class="clear"></div> </div> </body> </html> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

纯JS实现的批量图片预览加载功能
需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片
2011-08-08
javascript批量检查当图片不存在时则显示默认图片的代码
批量检查图片地址显示是不是有错误，在ie浏览器中是有当图片不存在时的onerror事件的，下面的代码即是非常不错的应用。
2008-09-09
js实现图片加载时候逐渐出现的杂色效果
有一些网站在加载图片的时候不是一下子就出来了，而是由模糊到清淅，或是由一种不占用过多网络资源的方式先大致显示，然后再慢慢加载，避免因用户等不及将网页关掉，像马赛克效果、沙子效果等
2010-08-08
映彩衣的js随笔(js图片切换效果)
最近写的一个关于图片切换的js，拿出来和大家分享一下
2011-07-07
真正的连续滚动图片
真正的连续滚动图片...
2006-09-09
图片从右至左滚动JS
图片从右至左滚动JS...
2007-01-01
比较方便的onMouseWheel缩放图片效果
比较方便的onMouseWheel缩放图片效果...
2006-09-09
关于图片按比例自适应缩放的js代码
用户上传照片，照片的尺寸未知；需要生成一个预览，这个预览图要根据提供给用户预览的区域自应用，并且居中；如果图片太大，需要按比例缩放
2011-10-10
js实现用滚动条来放大缩小图片的代码
js实现用滚动条来放大缩小图片的代码...
2007-07-07
JavaScript判断图片是否能够加载,失败则替换默认图片
JavaScript智能判断图片是否能够正确加载，若加载失败则用默认图片替换，这是个比较实用的功能，不少网站都可见到这种功能.
2010-10-10

js实现图片显示局部，鼠标经过显示全部的效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具