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实现图片加载时候逐渐出现的杂色效果
有一些网站在加载图片的时候不是一下子就出来了，而是由模糊到清淅，或是由一种不占用过多网络资源的方式先大致显示，然后再慢慢加载，避免因用户等不及将网页关掉，像马赛克效果、沙子效果等
2010-08-08
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
推荐自用 Javascript 缩图函数 (onDOMLoaded)……...
2007-10-10
javascript 图片滑动切换代码
nVida网站的图片滑动特效，这里为了快速演示效果，去掉了原有的图片用数字来代替，你完全可以插入你想要的图片，本特效使用JS实现，用CSS配合固定图片，以滑动的方式切换相应的多张图片。
2010-03-03
纯CSS实现的当鼠标移上图片添加阴影效果代码
这个效果挺实用，当把鼠标放到一幅静止的图片上，图片的四周边框会出现阴影，具有立体感的效果，代码是第二次修正，能适应大小不同的图片，值得大家尝试一用哦。
2009-12-12
js怎样实现下拉框改变，它旁边的图像也改变
一般用于用户选择头像或选择性别的需要
2008-09-09
纯JS图片批量预加载技术代码
一款实用的图片预加载技术，真正实现加载完成显示图片，加载过程中显示进度指示，本加载可以批量进行，将成批图片加载完成才显示，使用循环依次载入图片，并将路径暂存在数组中，加载完成后取出数组数据并显示。
2009-11-11
新页面打开实际尺寸的图片
新页面打开实际尺寸的图片...
2006-08-08
從博客網扣了一個效果出來
從博客網扣了一個效果出來...
2007-05-05
一个javascript图片阅览组件
这阵子琢磨着做一个可扩展的“相册”，其实就是一个JS做的用来展示图片的组件。不过何为可扩展呢？
2010-11-11
Blocksit插件实现瀑布流数据无限( 异步)加载
BlocksIt 瀑布流插件是基于jquery的，使用也非常简单，是为数不多的几款动态瀑布流插件之一。
2014-06-06