微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

 

显示效果

  

   

  

 

 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

 

下载资源

 

博客中使用

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

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

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐