? 一直對圖片縮放饒有興趣的我今日一個很投機的機會研究了一把

? 參考官方網站：http://www.mind-projects.it/projects/jqzoom/index.php

?參考demo文獻：http://www.mind-projects.it/projects/jqzoom/index.php#examples網站下方download一欄

?在官方文檔下載的demo文獻中，有詳盡的例子，這里主要解釋運用以及options(選項)的含義

$(document).ready(function() {
??????????? $('.jqzoom').jqzoom({
??????????????? zoomType: 'standard',
??????????????? lens:true,
??????????????? zoomWidth: 300,
??????????????? zoomHeight:450,
??????????????? xOffset:90,
??????????????? yOffset:30,
??????????????? preloadImages: true,
??????????????? alwaysOn:false

??????????? });

??????? });

此處為引用正文

html如下：

<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
??? <div class="clearfix">
??????? <a href="../images/triumph_big1.jpg" class="jqzoom" rel='gal1'? title="triumph" >
??????????? <img src="../images/triumph_small1.jpg"? title="triumph"? style="border: 4px solid #666;">
??????? </a>
?????????? </div>
??? <br/>
??? <div class="clearfix" >
??????? <ul id="thumblist" class="clearfix" >
??????????? <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small1.jpg',largeimage: '../images/triumph_big1.jpg'}"><img src='../images/thumbs/triumph_thumb1.jpg'></a></li>
??????????? <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small2.jpg',largeimage: '../images/triumph_big2.jpg'}"><img src='../images/thumbs/triumph_thumb2.jpg'></a></li>
??????????? <li><a? href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small3.jpg',largeimage: '../images/triumph_big3.jpg'}"><img src='../images/thumbs/triumph_thumb3.jpg'></a></li>
??????? </ul>
??? </div>
</div>

此處官方文檔有詳盡資料，這里也是引用官方資料文獻

屬性含義如下：

zoomWidth，表示放大框的寬
? zoomHeight ，表示放大框的高
? xOffset,表示離顯示展示中等圖片的x距離
?yOffset，表示離顯示中等圖片的Y距離
?position,表示顯示的放大框在瀏覽器的center，還是left,還是right
?lens,表示顯示在中等圖片的縮放位置是否顯示，默認為true
?alwaysOn,表示放大框是否一直顯示

轉載于:https://www.cnblogs.com/java20130723/archive/2013/04/06/3211459.html

總結

以上是生活随笔為你收集整理的jqZoom插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。