博客中添加图片查看器（支持图片查看、放大、缩小、翻转、切换、旋转）

 

显示效果

　　

 　　

　　

 

 html代码

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-默认效果_jq22</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#jq22 { width: 50%; margin: 0 auto; font-size: 0;}
#jq22 li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#jq22 li img { width: 100%;}
h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}

</style>
</head>
<body>
<h1>默认效果</h1>
<ul id="jq22">
<li><img data-original="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" src="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" alt="图片1"></li>
<li><img data-original="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" src="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" alt="图片2"></li>
<li><img data-original="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" src="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" alt="图片3"></li>
<li><img data-original="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" src="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" alt="图片4"></li>
<li><img data-original="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" src="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" alt="图片5"></li>
<li><img data-original="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" src="http://a.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb9ae54e286d224f4a20a4dd98.jpg" alt="图片6"></li>
</ul>
<script src="js/viewer.min.js"></script>
<script>
var viewer = new Viewer(document.getElementById('jq22'), {
    url: 'data-original'
});
</script>

</body>
</html>

 

 

引用 js

viewer.min.js

 

引用 css 

viewer.min.css

 

下载资源

下载资源（https://files.cnblogs.com/files/xqz0618/viewer.rar）

 

在博客中使用

博客设置中 页脚HTML 代码 添加以下代码

⭐目前存在BUG：代码块复制图标点击也会显示出来图片放大

<link rel="stylesheet" href="https://files.cnblogs.com/files/xqz0618/viewer.min.css">
<script src="https://files.cnblogs.com/files/xqz0618/viewer.min.js"></script>
<script>
　　var viewer = new Viewer($('.postBody')[0], {
    　　url: 'data-original'
　　});
</script>

 

posted @ 2020-06-29 12:49  茄子鱼  阅读(539)  评论(1)  编辑  收藏  举报