jquery图片放大、禁止下载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39019735/article/details/85695799

最近项目中需要把我们平台提供的图片禁止用户下载和一个点击小图放大的功能

图片放大我是在网上找的一个小插件：zoomify.js和zoomify.css

以下是Demo：

1、引入js和css

<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/zoomify.js" ></script>
<style rel="stylesheet" href="../css/zoomify.css" ></style>

2、定义Img控件

<div >
    <img style="height: 150px;" src="../img/PJJ004B.png" />
    <img style="height: 150px;" src="../img/BAYCWLEB1.png" />
    <img style="height: 150px;" src="../img/BFYPRLJB1.png" />
    <img style="height: 150px;" src="../img/PJXC01L.png" />
</div>

3、调用方法

$(function() {
    $('img').zoomify();
});

需要注意的是jq必须在zoomify前面引入，不要问我为什么知道，我不会告诉你这个错我找了半个小时的！

禁止下载就比较简单了：

<img src="" ondragstart="return false;" oncontextmenu="return false;" />

解释：

ondragstart事件是拖动事件，现在很多浏览器都可以把图片拖倒标签栏打开所以要把这个事件禁止。

oncontextmenu事件是右击事件，禁止右键保存图片。

溜了！