jQuery照片扩展不影响其他元素的布�

之前在网上看到这个特效，但是当时没有收藏网站，不知道怎么实现这个特效。今天在网上专门搜索了一下，找到了。我也尝试过自己写：但只是简单的图片放大，也影响了图片周围元素的布局(因为图片放大占用的空间比较大)。后来发现，灵活巧妙地运用溢出和位置的属性可以达到目的。其实我觉得CSS(CSS3)中的溢出和位置(顺带一提，上、下、左、右)只是网页上特效的简单组合，当然js(jquery)是领头羊。说了这么多废话，大家肯定还在疑惑：这是什么特效？唉，我的语言表达能力还是很一般。下面我用截图解释一下：这是网页打开的初始样子：。

当你把鼠标放在上面6张图片中的任何一张上时，就会出现我提到的特效(这里我把鼠标放在第三张图片上作为例子):。

你会发现画面缩小了，松开鼠标，画面感觉又放大了(回到初始状态)，没有画面溢出，也不影响其他画面和元素的布局。在下面贴代码：复制代码如下：键入doctype html public '-//W3C//dtd XHTML 1.0 transitional//en ' ' http://www.w3.org/tr/XHTML 1/dtd/XHTML 1-transitional . dtd ' html xmlns=' http://www.w3.org/1999/XHTML' head title jquery。-Style-Style类型=' text/CSS ' * { margin : 0；padd : 0；} body { font-family : ' Myriad Pro '，' Trebuchet MS '，Helvetica，无衬线；font-size : 12px；color: # fff} # col { width: 600px高度：400 px；margin: 20px汽车0px汽车；border: 1px实心# 2D353F} .pic { width: 200px高度： 200 px；margin: 0px飞越：隐藏；/*溢出在这里定义为隐藏*/position:相对；/*此处位置定义为相对，实际上是根据pic */float: left定位以下img位置；}/*图片原尺寸约500*333 *//*这里没有宽度的大惊小怪，只是高度*/。pic a img { height: 500pxborder:无；绝对位置：/*仅仅因为父标签定义了位置，img在这里定义位置才有定位依据，否则整个浏览器都定位*/top :-66.5px；left :-150 px；opacity: 0.5-moz-opa city 3360 0.5；filter : progid : maximagettransform。Microsoft.Alpha(不透明度=50)；/*为了浏览器的兼容性，它与这里的不透明度属性具有相同的功能*/} /style！-JavaScript-脚本类型=' text/JavaScript ' src=' http : js/jquery . min . js '/脚本脚本类型=' text/JavaScript ' $(function(){ $(' # col img ')。hover(function(){ var $ this=$(this)；$this.stop()。动画({ '不透明度' :'1.0 '，'高度' :'200px '，'顶部' :'0px '，'左侧' : ' 0px ' })；}，function(){ var $ this=$(this)；$this.stop()。动画({ '不透明度' :'0.5 '，'高度' :'500px '，'顶部' :'-66.5px '，'左侧' : '-150 px ' })；} );});/script body div id=' col ' div class=' pic ' a href=' # ' img src=' http : IMages/1 . jpg '/a/div class=' pic ' a href=' # ' img src=' http : IMages/2 . jpg '/a/div class=' pic ' a href=' # ' img src=' http 3360 IMages/3 . jpg '/a/div class=' pic ' a href