图片放大镜效果【jQZoom-JQuery插件】【9demo发布】

2009-03-26 分类：JavaScript 阅读(37882) 评论(0)

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

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

也可以打这里下载?jQZoom v2.2：http://www.rayfile.com/files/a5ff0b4c-9dd6-11dd-b341-0019d11a795f/

使用方法

1.引用?jQZoom插件的样式：

?

XML/HTML代码

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

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

?

XML/HTML代码

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

XML/HTML代码

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

4.页面加载完成后执行

?

JavaScript代码

$(document).ready(function(){ ??
$(“.jqzoom”).jqueryzoom(); ??
});??

或者

?

JavaScript代码

$(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 ??
}); ??
});??

?看完这些无需去9demo看了：http://www.9demo.com/article/10.htm

赞(0) 打赏

未经允许不得转载：WEB前端开发 » 图片放大镜效果【jQZoom-JQuery插件】【9demo发布】

相关推荐

评论抢沙发

前端开发相关广告投放更专业更精准