不灭的火

革命尚未成功,同志仍须努力下载JDK17

作者:AlbertWen  添加时间:2013-01-22 09:16:38  修改时间:2025-04-19 10:46:48  分类:06.前端/Vue/Node.js  编辑

网上看到的,共享出来给大家

jQZoom(目前最新v2.2版本)官方网在:http://www.mind-projects.it/blog/jqzoom_v10大家可以在这里看演示

也可以打这里下载 jQZoom v2.2:

http://download.csdn.net/detail/wenjianbao/5020276

使用方法

1.引用 jQZoom插件的样式:

<link rel=“stylesheet” href=“你的路径/jqzoom.css” type=“text/css” media=“screen”>

2.引用JQ脚本和jQZoom插件脚本:

<script src="你的路径/jquery.js" type="text/javascript"></script>
<script src="你的路径/jquery.jqzoom.js" type="text/javascript"></script>

3.页面中要用放大镜的图片:

注意这里的样式是:class=”jqzoom”,还有大图的属性:jqimg=”images/shoe4_big.jpg”

<p class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg" /></p>

4.页面加载完成后执行

$(document).ready(function(){
	$(".jqzoom").jqueryzoom();
});

或者

$(document).ready(function () {
	$(".jqzoom").jqueryzoom({
		xzoom : 300, //放大的宽度(默认是200)
		yzoom : 300, //放大的高度度(默认是200)
		offset : 40, //zooming div default offset(default offset value is 10)
		position : "right", //zooming div position(default position value is "right")
		preload : 1 //by default preload of big images is 1
		lens : 1 //by default the lens is 1
	});
});