jquery 實(shí)現(xiàn)京東商城、凡客商城的圖片放大效果

更新時(shí)間：2009年05月10日 11:40:31 作者：

京東商城、凡客商城的圖片放大效果很是吸引人

效果如下：

看下我們的演示，“運(yùn)行代碼”后請(qǐng)刷新一次：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

要實(shí)現(xiàn)這樣的效果，只需要在需要這樣效果的頁(yè)面的區(qū)域加入：

復(fù)制代碼代碼如下:

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" /> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function() { 
var option = 
{ 
zoomWidth:350, 
zoomHeight:260, 
lens:true, 
xOffset:20, 
yOffset:-1, 
positon:"left", 
title:false 
} 
$(".jqzoom").jqzoom(option); 
}); 
</script> 

而對(duì)于需要采用該效果的圖片：

復(fù)制代碼代碼如下:

<a href="upload/bimg/2.jpg" class="jqzoom" title="搜索吧"><img src="upload/simg/2.jpg" /></a> 

class="jqzoom"是關(guān)鍵。
而其屬性設(shè)置包括：

您也可以直接查看原文章：http://www.mind-projects.it/projects/jqzoom/index.php#examples
您也許有興趣看下作者精心準(zhǔn)備的例子：http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

打包下載地址

您可能感興趣的文章:

相關(guān)文章

DropDownList實(shí)現(xiàn)可輸入可選擇（兩種版本可選）
本篇文章主要介紹了DropDownList實(shí)現(xiàn)可輸入可選擇的具體實(shí)現(xiàn)代碼，并附上兩種版本（js版本和jquery版本），可供大家選擇。有需要的朋友可以參考下
2016-12-12
基于Bootstrap和JQuery實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)和關(guān)閉tab頁(yè)的實(shí)例代碼
這篇文章主要介紹了基于Bootstrap和JQuery實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)和關(guān)閉tab頁(yè)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
jQuery基于Ajax方式提交表單功能示例
這篇文章主要介紹了jQuery基于Ajax方式提交表單功能,結(jié)合實(shí)例形式分析了jQuery使用ajax方式提交表單的具體步驟與常見(jiàn)操作技巧,需要的朋友可以參考下
2017-02-02
jQuery使用方法
本文主要介紹了jQuery的使用方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
jquery text()方法取標(biāo)簽中的文本
本節(jié)主要介紹了jquery使用text()方法取標(biāo)簽中的文本的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-07-07
jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果實(shí)戰(zhàn)（4）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
節(jié)點(diǎn)的插入之a(chǎn)ppend()和appendTo()的用法介紹
說(shuō)到節(jié)點(diǎn)的插入想必大家對(duì)append()和appendTo()的用法并不陌生吧，下面有個(gè)不錯(cuò)的是，希望對(duì)大家學(xué)習(xí)有所幫助
2014-01-01
jQuery實(shí)現(xiàn)的頁(yè)面詳情展開(kāi)收起功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的頁(yè)面詳情展開(kāi)收起功能,涉及jQuery事件綁定及頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
JQERY limittext 插件0.2版(長(zhǎng)內(nèi)容限制顯示)
JQERY limittext 插件為長(zhǎng)內(nèi)容增加一個(gè)顯示更多的功能
2010-08-08
jQuery實(shí)現(xiàn)條件搜索查詢、實(shí)時(shí)取值及升降序排序的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)條件搜索查詢、實(shí)時(shí)取值及升降序排序的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05