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