首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

利用jqueryzoom兑现图片放大镜效果

2012-11-10 
利用jqueryzoom实现图片放大镜效果在你的页面中包含 jqzoom.css?包含 jQzoom 和 jQuery JS 代码:现在创建

利用jqueryzoom实现图片放大镜效果
在你的页面中包含 jqzoom.css

?包含 jQzoom 和 jQuery JS 代码:
现在创建一个放图片的容器(最好是 DIV),并给 class 赋值为 jqzoom,然后给每张图片设置一个 jqimg 属性,它的值为大图的地址。
?当页面导入的时候,载入 jQZoom 插件。在head之前写入下面JS
$(document).ready(function(){    $(".jqzoom").jqueryzoom({        xzoom: 300, //设置放大 DIV 长度(默认为 200)        yzoom: 300, //设置放大 DIV 高度(默认为 200)        offset: 10, //设置放大 DIV 偏移(默认为 10)        position: "right", //设置放大 DIV 的位置(默认为右边)         preload:1,        lens:1    });});
?这个jquery.js,jquery.jqzoom.js可以在网上下,到处都是。这里就不附件了。

热点排行