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

发布时间：2020-12-15 02:14:30 所属栏目：C语言来源：网络整理

导读：? 显示效果 ? ? ?html代码 ! DOCTYPE html html lang ="zh-Hans" head meta charset ="utf-8" title JS/jQuery图片查看器viewer.js演示-默认效果_jq22 / link rel ="stylesheet" href ="css/viewer.min.css" style * { margin : 0 ; padding } #jq22 width 5

显示效果

?html代码

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

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

html>

引用 js

viewer.min.js

引用 css?

viewer.min.css

下载资源

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

在博客中使用

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

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

="https://files.cnblogs.com/files/xqz0618/viewer.min.css"="https://files.cnblogs.com/files/xqz0618/viewer.min.js">
　　 Viewer($(.postBody)[0],{
    　　url: 
　　});
>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!