带视觉差特效的jquery鼠标hover图片放大插件

当前位置:主页 > jQuery库 > 图片效果 > 带视觉差特效的jquery鼠标hover图片放大插件
带视觉差特效的jquery鼠标hover图片放大插件
分享:

    插件介绍

    Parazoom.js是一款带视觉差特效的jquery鼠标hover图片放大插件。该jquery图片放大插件可以实现图片内部放大,图片跟随鼠标平移,视觉差移动等特效,非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-11
    阅读:
简要教程

Parazoom.js是一款带视觉差特效的jquery鼠标hover图片放大插件。该jquery图片放大插件可以实现图片内部放大,图片跟随鼠标平移,视觉差移动等特效,非常炫酷。

使用方法

在页面中引入jquery和parazoom.min.js文件。

<script src="jquery.min.js"></script>
<script src="parazoom.min.js"></script>
                
HTML结构

然后在页面中添加图片。

<img src="your-image.jpg" alt="Alt text">
                

如果需要在鼠标hover时,替换高清版本的图片,使用下面的代码。

<img src="thumb.jpg" data-prz-large-img="large.jpg" alt="images">
                
初始化插件

在页面DOM元素加载完毕之后,通过parazoom()方法来初始化该jquery鼠标hover图片放大插件。

<script type="text/javascript">
    $(function () {
        jQuery('img').parazoom();
    });
</script>
                

配置参数

该jquery鼠标hover图片放大插件的可用配置参数有:

$('img').parazoom({

  // scale level
  scale: '1.2',

  // transition options
  transitionTime: '0.3s',
  transitionTimeLeave: '1s',

  // opacity options
  opacity: '1',
  opacityHover: '1',

  // or 'visible'
  overflow: 'hidden',

  // cursor options
  cursor: 'default',
  customCursorIcon: '',
  customCursorSize: '20px',

  // tilt options
  tilt: false,
  tiltXamount: 10,
  tiltYamount: 10,

  // alt text options
  text: false,
  textClass: false,
  textPosition: 'middle',
  textAlignment: 'center',
  textXParallax: 10,
  textYParallax: 10,
  textOpacity: 0,
  textOpacityHover: 1
  
});

                

例如:在鼠标hover图片时,显示描述文本:

$('img').parazoom({
  text: true
});
                

在鼠标hover图片时,实现视觉差特效:

$('img').parazoom({
  tilt: true
  tiltXamount: '30'
  tiltYamount: '20'
  overflow: 'visible'
});
                

在鼠标hover图片时,自定义鼠标样式。

$('img').parazoom({
  customCursorIcon: 'cursor.svg',
  customCursorSize: '100px'
});
                

该jquery鼠标hover图片放大插件的github地址为:https://github.com/olivier3lanc/Parazoom

网友评论