轉載jQuery圖片放大外掛程式[twiPicZoom]

最後更新：2014-07-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：des style blog http java color

轉載http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能說明：

雙擊查看大圖，滑鼠滾動放大縮小，能夠切換到上一張和下一張，點擊右上方關閉，相容主流的瀏覽器。

效果：

（例子一效果）

（例子二效果：注，如果第一張的時候，左側就不會顯示前一張箭頭，最後一張類似）

如何使用：（include）

1、樣式 twiPicZoom.css

2、jQuery的類庫，不一定要用1.8.3，其他的版本也行。

3、滑鼠滾動放大縮小需要用到 jquery.mousewheel.js

4、核心 jquery.twiPicZoom.js

在代碼中對選擇的對像直接使用twiPicZoom()方法。

$(function () {

$(‘img[type="twiPicZoom"]‘).twiPicZoom();

});

例子1：

<head>

<title>查看圖片大圖</title>

$(function () {

$(‘img[type="twiPicZoom"]‘).twiPicZoom();

});

</script>

</head>

<body>

</div>

</body>

</html>

例子2：（複雜的結構，選擇的不是圖片對象，也可配置屬性）

<head>

<title>查看圖片大圖/更改配置</title>

$(function () {

$(‘div[type="twiPicZoom"]‘).twiPicZoom({srcField:‘href‘});

});

</script>

#imgContainer div

{

display:inline-block;

}

</style>

</head>

<body>

<h2>Desert</h2>

</div>

<h2>Hydrangeas</h2>

</div>

<h2>Lighthouse</h2>

</div>

<h2>Jellyfish</h2>

</div>

</body>

</html>

源碼：

twiPicZoom 1.0 ：http://www.kuaipan.cn/file/id_50389080302682261.htm

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

轉載jQuery圖片放大外掛程式[twiPicZoom]

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support