jquery 实现京东商城、凡客商城的图片放大效果

更新时间：2009年05月10日 11:40:31 作者：

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

效果如下：

看下我们的演示，“运行代码”后请刷新一次：

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

要实现这样的效果，只需要在需要这样效果的页面的区域加入：

复制代码代码如下:

<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> 

而对于需要采用该效果的图片：

复制代码代码如下:

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

class="jqzoom"是关键。
而其属性设置包括：

您也可以直接查看原文章：http://www.mind-projects.it/projects/jqzoom/index.php#examples
您也许有兴趣看下作者精心准备的例子：http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

打包下载地址

您可能感兴趣的文章:

jQuery中Form相关知识汇总
这篇文章主要介绍了jQuery中Form相关知识汇总,总结的十分全面，需要的朋友可以参考下
2015-01-01
jquery获取下拉框中的循环值
本文主要介绍了jquery获取下拉框中的循环值的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
jQuery中:file选择器用法实例
这篇文章主要介绍了jQuery中:file选择器用法,实例分析了:file选择器的功能、定义及选取类型为file的<input>元素的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery实现三级菜单的代码
上周新接手一个网站建设的活儿，其中有需要要jquery代码实现三级菜单的需求，其实说难也不难，下面小编把代码分享给大家，供大家参考
2016-05-05
jQuery Selectors(选择器)的使用(一、基本篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深。
2009-12-12
Jquery Fade用法详解
这篇文章主要介绍了Jquery Fade用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
DWZ刷新dialog解决方法
点击某个按钮，删除某条记录后，提示删除成功，然后刷新dialog。
2013-03-03
jquery 插件学习（二）
除了全局函数外，jquery中的大多数插件都是通过jquery对象的方法提供的
2012-08-08
Easyui Treegrid改变默认图标的方法
这篇文章主要介绍了Easyui Treegrid改变默认图标的方法的相关资料,需要的朋友可以参考下
2016-04-04
使用基于jquery的gamequery插件做JS乒乓球游戏
现在jquery比较流行，用js做游戏的也越来越多了，虽然现在html5出来了，但实际上要用html5做点啥出来还是得靠javascript，所以学好js是非常重要的
2011-07-07