日期:2014-05-16  浏览次数:20431 次

【JS常用插件】artZoom微博图片放大插件

1.?????? artZoom图片放大插件

a.?????? 导入artZoom

<link type="text/css" href="路径/artzoom/jquery.artZoom.css" rel="stylesheet"/>

<script type='text/javascript' src='路径/artzoom/jquery.artZoom.js'></script>

b.?????? 全局加载artZoom插件

HTML代码

<img class="artZoom" src="http://ww4.sinaimg.cn/thumbnail/630bea00jw1dp538y

4q4cj.jpg" / data-artZoom-show=” http://ww4.sinaimg.cn/bmiddle/630bea00jw1dp5

38y4q4cj.jpg data-artZoom-source =” http://ww4.sinaimg.cn/large/630bea00jw1dp5

38y4q4cj.jpg” />

JSCode

jQuery(function ($) {

$('.artZoom').artZoom({

path: './images',? // 设置artZoom图片文件夹路径

preload: true,??????????????? // 设置是否提前缓存视野内的大图片

blur: true,?????????????????????? // 设置加载大图是否有模糊变清晰的效果

// 语言设置

left: '左旋转',?????? ???????? // 左旋转按钮文字

right: '右旋转',???????????? // 右旋转按钮文字

source: '看原图'????????? // 查看原图按钮文字

});

});

注意:要拷贝artzoom image包下所有图片和鼠标指针文件,否则样式无法显示完整。