投稿 搜索
当前位置: 站长天下 / 图片相册背景 / jquery鼠标hover实现图片放大带视觉差特效代码
jquery鼠标hover实现图片放大带视觉差特效代码
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-11
    阅读:

jquery鼠标hover实现图片放大带视觉差特效代码

简要教程

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>