Jquery插件jqzoom(实现放大镜效果)

一、介绍                         

  jqzoom是一款基于jQuery的图片方法插件。

二、使用方法

  1.引入jQuery与jqzoom,jqzoom.css

  2.准备两张一大一小大小相同的图片,小图片放在<img>标签的"src"属性里,给img标签加个<a>标签,<a>标签的"href"属性链向大图片,a标签必须有title属性,不然显示不了

三、参数说明

  zoomWidht:  小图片所选区域的宽度。

  zoomHeight:   小图片所选区域的高度。

  zoomType:   默认值为standard。如果设为reverse,在小图片仲,移入鼠标时,所选区域高亮,非选中区域淡灰色。

  xOffset:    放大后的图片与小图片间的X(横坐标)距离。

  yOffset:    放大后的图片与小图片间的Y(纵坐标)距离。

  position:     放大后的图片相对原图片的位置,默认为"right",还可设置为"left","top","bottom"。

  lens:      布尔值,表示是否显示小图片中的选中区域,默认值为"true",如果设为"false",则放大后的图片上面不会出现主题字样。

  imageOpacity: 当zoomType的值为"reverse"时,用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。

  preloadImages:布尔值,表示是否重新加载大图像。

  preloadText:  重新加载大图像时,小图像显示的文本说明。

   title:      大图像顶部是否显示<a>标签里的title。

  showEffect:   大图像加载时的特效,可选值:"show"表示直接显示,"fadein"由透明度渐变载入效果。

  hideEffect:   大图像隐藏特效,可选值:"hide"表示直接隐藏,"fadeout"透明度渐变隐藏。  

  fadeinSpeed:  当大图像的载入特效设为"fadein"时,此属性可设置特效的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。

  fadtoutSpeed:  当大图像的隐藏特效设为"fadeout"时,此属性可设置特效载的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。

四、例子

     HTML代码:

<body>
    <div style="margin-left:500px;">
        <a id="img1" href="/1big.jpg" title="可爱小白兔" ><img src="/1small.jpg" alt="" /></a>
    </div>
</body>

     js代码:

复制代码
    <script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.jqzoom-core.js" type="text/javascript"></script> <link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { $('#img1').jqzoom({ zoomWidth:200, zoomHeight:200, position:"bottom",          
          yOffset:50, lens:true, imageOpacity:1.0 }); }) </script>
复制代码

转载于:https://www.cnblogs.com/huangsblog/p/4554696.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值