首页>>Jquery图片>>放大镜效果 微型图 中型图与放大的图片 外部放大和内部放大(2014-06-07)

放大镜效果 微型图 中型图与放大的图片 外部放大和内部放大

 本站已经添加了好几个类似的效果,搜索“放大镜”可以找到.这个实用性很好，插件和小，兼容常见浏览器

放大镜效果 微型图 中型图与放大的图片 外部放大和内部放大
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="zoom-section">          
  2.         <div class="zoom-small-image">  
  3.             <div id="wrap" style="top:0px;z-index:9999;position:relative;"><a href="images/bigimage00.jpg" class="cloud-zoom" id="zoom1" rel="adjustX:10, adjustY:-4" style="position: relative; display: block;"><img src="./images/smallimage.jpg" alt="" title="Optional title display" style="display: block;"></a><div class="mousetrap" style=" z-index: 999; position: absolute; width: 240px; height: 320px; left: 0px; top: 0px; cursor: move;"></div></div></div>  
  4.         <div class="zoom-desc">  
  5.             <h3>标准设置与画廊</h3>         
  6.             <p><a href="images/bigimage04.jpg" class="cloud-zoom-gallery" title="Red" rel="useZoom: 'zoom1', smallImage: 'images/smallimage-4.jpg' "><img class="zoom-tiny-image" src="./images/tinyimage-2.jpg" alt="Thumbnail 1"></a>  
  7.               
  8.                           
  9.               
  10.             <p>悬停在大型图像变焦工作。</p>  
  11.             <p>这是设置“框出”大的形象出现的小图像的效果。</p>  
  12.             <p>可以改变较小的图像，镜头和缩放窗口的外观与普通的CSS。</p>  
  13.         </div>  
  14.     </div><!--zoom-section end-->  
  15.   
  16.     
  17.     <div class="zoom-section">  
  18.         <div class="zoom-small-image">  
  19.             <div id="wrap" style="top:0px;z-index:9999;position:relative;"><a href="images/bigimage04.jpg" class="cloud-zoom" rel="position:'inside',showTitle:false,adjustX:-4,adjustY:-4" style="position: relative; display: block;"><img src="./images/smallimage-4.jpg" title="Your caption here" alt="" style="display: block;"></a><div class="mousetrap" style="background-image:url(".");z-index:999;position:absolute;width:240px;height:320px;left:0px;top:0px;"></div></div>  
  20.         </div>  
  21.         <div class="zoom-desc">  
  22.             <h3>内部放大</h3>  
  23.             <p>变焦位置可以内部较小的图像，有用的，如果你不想掩盖任何其他内容。</p>  
  24.         </div>  
  25.     </div><!--zoom-section end-->  
  26.    

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_351.html