jQuery的图片浏览插件Zoomimage

所属分类:媒体-图片展示

 52767  354  查看评论 (16)
分享到微信朋友圈
X
jQuery的图片浏览插件Zoomimage ie兼容6

使用方法

附加JavaScript和CSS文件到你的文档。编辑CSS文件并且 匹配你的图片路径,同时改变颜色匹配你网站的主题 重要:像例子中一样确定包含的JavaScript文件 具体顺序。

<link rel="stylesheet" media="screen" type="text/css" href="css/zoomimage.css" />
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/zoomimage.js"></script>

调用代码

你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。

 $('a.myLinks').zoomimage(options);

可选项

一个哈希参数。所有的参数都是可选的。

Opacityfloat控制栏和标题栏的不透明度。默认: 0.3
borderinteger图片的边框宽度。默认: 0
durationinteger动态化持续时间。默认: 300
译者注:控制图片放大的时间和标题栏、控制栏显示的时间,两个操作不同步进行。
easingstring动画缓和。默认: linear
preventinteger拖动图像前忽略的位移像素(防止鼠标的意外拖动所用)。默认: 14
译者注:防止鼠标按下后意外移动导致图像发生位移。
controlsboolean是否显示控制条(如果一个图片组中只有一张图片,则控制条不显示)。默认: true
captionboolean是否显示标题(标题的内容来源于a标签的title属性)。默认: true
centeredboolean图片放大后是否在浏览器中心显示。默认: false
hideSourceboolean图片放大后是否影藏原微缩图像。默认: false
classNamestring用户自定义的CSS样式名。默认: false。
译者注:false时使用zoomimage.css文件,className即为css文件名同时也是css类名。
controlsTriggerstring控制标题的显示样式,'focus'图像获取到焦点是显示标题,'mouseover'鼠标悬停在图片上时显示标题。默认: 'focus'
preloadstring预处理,'click'当点击是加载图片 ,'load'文档载入时就加载图片。默认: 'click'
onLoadfunction回调函数,当图像被加载的时候触发
beforeZoomInfunction回调函数,在图像被放大前触发
onZoomInfunction回调函数,在图像被放大时触发
beforeZoomOutfunction回调函数,在图像被缩小前触发
onZoomOutfunction回调函数,在图像被缩小时触发
onFocusfunction回调函数,当图片获取焦点时触发

关闭所有图片或移除节点

如果你想关闭所有打开的图片或像不通过触发器清除图片(从DOM移除),那么你可以使用 'zoomimageClear'。这个插件的这个选择器永远是 'div.zoomimage'.

$('div.zooimage').zoomimageClear();

阴影设置

你可以自定义阴影。要做到这一点你必须明白如何布局框来呈现阴影。

Shadow layout

每个CSS类负责一个特定区域的阴影。你可以在类中改变背景图片的位置和大小。


相关插件-图片展示

jQuery唯美图片Y轴展示

实现精美唯美图片Y轴展示效果
  图片展示
 38243  500

jQuery原始图片对比插件

这是一款很实用的jQuery图片插件,它可以帮助你实现原图和经过处理的图片进行对比,这款jQuery插件一共有3中对比模式,主要是拖动中间的分割线来进行两张图片的细节对比。
  图片展示
 33695  364

鼠标划过图片放大效果

一般用于展示类,鼠标滑过,图片放大,焦点图
  图片展示
 48646  480

jQuery动态缩放焦点图

jQuery动态缩放焦点图
  图片展示
 34474  401

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    masaladi 0
    2024/11/7 17:42:32
    无傲气有傲骨 0
    2021/12/24 12:50:48
    怎么使用高版本的jquery? 回复
    xgcshxzh 0
    2018/11/14 16:35:17
    只能用作者提供的jquery.js版本 回复
    langtu 0
    2017/12/1 15:33:04
    45679 0
    2017/7/4 13:38:24
    永远伴随着你 0
    2017/5/10 13:42:14
    文贵 0
    2017/4/19 16:35:00

    这个可以设置旋转吗?

    回复
    zhangjsir 0
    2017/4/14 15:35:16

    怎么使用高版本的jquery去兼容zoomImage

    回复
    ≮ Dēnsiōn lèe ≯ 0
    2016/12/22 11:12:24
    0
    2016/12/9 16:12:32
    请教下,怎么使用高版本的jquery去兼容zoomImage 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复