`
正斌charles
  • 浏览: 36917 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【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包下所有图片和鼠标指针文件,否则样式无法显示完整。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics