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

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

?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代码
  1. <link?rel=“stylesheet”?href=“你的路径/jqzoom.css”?type=“text/css”?media=“screen”>???

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

?

XML/HTML代码
  1. <script?src=“你的路径/jquery.js”?type=“text/javascript”></script>??
  2. <script?src=“你的路径/jquery.jqzoom.js”?type=“text/javascript”></script>??

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

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

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

4.页面加载完成后执行

?

JavaScript代码
  1. $(document).ready(function(){ ??
  2. $(“.jqzoom”).jqueryzoom(); ??
  3. });??

或者

?

JavaScript代码
  1. $(document).ready(function(){ ??
  2. $(“.jqzoom”).jqueryzoom({ ??
  3. xzoom:?300,?//放大的宽度(默认是200) ??
  4. yzoom:?300,?//放大的高度度(默认是200) ??
  5. offset:?40,?//zooming?div?default?offset(default?offset?value?is?10) ??
  6. position:?“right”,?//zooming?div?position(default?position?value?is?”right”) ??
  7. preload:1?//?by?default?preload?of?big?images?is?1 ??
  8. lens:1?//?by?default?the?lens?is?1 ??
  9. }); ??
  10. });??

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 图片放大镜效果【jQZoom-JQuery插件】【9demo发布】

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

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

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏