jquery 图片放大功能插件

配置参数
•zoomType,默认值:’standard’,另一个值是’reverse’,是否将原图用半透明图层遮盖。
•zoomWidth,默认值:200,放大窗口的宽度。
•zoomHeight,默认值:200,放大窗口的高度。
•xOffset,默认值:10,放大窗口相对于原图的x轴偏移值,可以为负。
•yOffset,默认值:0,放大窗口相对于原图的y轴偏移值,可以为负。
•position,默认值:’right’,放大窗口的位置,值还可以是:’right’ ,’left’ ,’top’ ,’bottom’。
•lens,默认值:true,若为false,则不在原图上显示镜头。
•imageOpacity,默认值:0.2,当zoomType的值为’reverse’时,这个参数用于指定遮罩的透明度。
•title,默认值:true,在放大窗口中显示标题,值可以为a标记的title值,若无,则为原图的title值。
•showEffect,默认值:’show’,显示放大窗口时的效果,值可以为: ‘show’ ,’fadein’。
•hideEffect,默认值:’hide’,隐藏放大窗口时的效果: ‘hide’ ,’fadeout’。
•fadeinSpeed,默认值:’fast’,放大窗口的渐显速度(选项: ‘fast’,'slow’,'medium’)。
•fadeoutSpeed,默认值:’slow’,放大窗口的渐隐速度(选项: ‘fast’,'slow’,'medium’)。
•showPreload,默认值:true,是否显示加载提示Loading zoom(选项: ‘true’,'false’)。
•preloadText,默认值:’Loading zoom’,自定义加载提示文本。
•preloadPosition,默认值:’center’,加载提示的位置,值也可以为’bycss’,以通过css指定位置。

在线演示:http://www.mind-projects.it/projects/jqzoom/demos.php
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
附加JavaScript和CSS文件到你的文档。编辑CSS文件并且 匹配你的图片路径,同时改变颜色匹配你网站的主题 重要:像例子中一样确定包含的JavaScript文件 具体顺序。 <link rel="stylesheet" media="screen" type="text/css" href="css/zoomimage.css" />[removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可选的。 Opacity float 控制栏和标题栏的不透明度。默认: 0.3 border integer 图片的边框宽度。默认: 0 duration integer 动态化持续时间。默认: 300 译者注:控制图片放大的时间和标题栏、控制栏显示的时间,两个操作不同步进行。 easing string 动画缓和。默认: linear prevent integer 拖动图像前忽略的位移像素(防止鼠标的意外拖动所用)。默认: 14 译者注:防止鼠标按下后意外移动导致图像发生位移。 controls boolean 是否显示控制条(如果一个图片组中只有一张图片,则控制条不显示)。默认: true caption boolean 是否显示标题(标题的内容来源于a标签的title属性)。默认: true centered boolean 图片放大后是否在浏览器中心显示。默认: false hideSource boolean 图片放大后是否影藏原微缩图像。默认: false className string 用户自定义的CSS样式名。默认: false。 译者注:false时使用zoomimage.css文件,className即为css文件名同时也是css类名。 controlsTrigger string 控制标题的显示样式,'focus'图像获取到焦点是显示标题,'mouseover'鼠标悬停在图片上时显示标题。默认: 'focus' preload string 预处理,'click'当点击是加载图片 ,'load'文档载入时就加载图片。默认: 'click' onLoad function 回调函数,当图像被加载的时候触发 beforeZoomIn function 回调函数,在图像被放大前触发 onZoomIn function 回调函数,在图像被放大时触发 beforeZoomOut function 回调函数,在图像被缩小前触发 onZoomOut function 回调函数,在图像被缩小时触发 onFocus function 回调函数,当图片获取焦点时触发 关闭所有图片或移除节点 如果你想关闭所有打开的图片或像不通过触发器清除图片(从DOM移除),那么你可以使用 'zoomimageClear'。这个插件的这个选择器永远是 'div.zoomimage'. $('div.zooimage').zoomimageClear();阴影设置 你可以自定义阴影。要做到这一点你必须明白如何布局框来呈现阴影。 每个CSS类负责一个特定区域的阴影。你可以在类中改变背景图片的位置和大小。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值