js图片旋转功能插件

最新推荐文章于 2024-04-26 16:47:03 发布

若水无华

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量343

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/bj123467/article/details/129498001

版权

主要使用了viewer功能

附件链接如下：https://caoguowei.coding.net/s/6ac1d0fc-e140-4208-9268-f1dd7b75bea7https://caoguowei.coding.net/s/6ac1d0fc-e140-4208-9268-f1dd7b75bea7

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8">
  <title>响应式相册图片弹出层，可旋转、放大缩小插件-默认效果-素材牛素材演示</title>
  <link rel="stylesheet" href="css/viewer.min.css">
  <style>
      * { margin: 0; padding: 0;}
      #sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}
      #sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
      #sucaihuo li img { width: 100%;}
  </style>
</head>

<body>
  <h1>默认效果</h1>

  <ul id="sucaihuo">
      <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
      <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
      <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
      <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
      <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
      <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
  </ul>

  <script src="js/viewer.min.js"></script>
  <script>
      var viewer = new Viewer(document.getElementById('sucaihuo'), {
          url: 'data-original'
      });
  </script>
  
<style>
body { margin: 0; border-left: 200px solid #ccc;}
h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}
.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;}
.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { background-color: #eee;}
.menu .cur { color: #000; background-color: #fff !important;}
</style>
<div class="menu">
  <a class="cur" href="index.html">1、默认效果</a>
  <a href="index2.html">2、jQuery版本</a>
  <a href="index3.html">3、回调函数</a>
  <a href="index4.html">4、自定义方法</a>
</div>

<!--此段可直接删除-开始-->
<style>
.sucainiu-footer{text-align:center; padding-top:20px;}
.sucainiu-footer p{line-height:30px;}
.sucainiu-footer a{color:#06F}
</style>
<div class="sucainiu-footer">
  <p><a href="http://www.sucainiu.com" target="_blank">素材牛</a>最精准的素材发布、分享平台（<a href="http://www.sucainiu.com" target="_blank">http://www.sucainiu.com</a>）</p>
  <p><a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=dc47456140e5565440fe64d9b5b07f56ab054b8dac5bee3da5fb6c23469545ec">官方网站学习交流QQ群 - <img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="素材牛交流群" title="素材牛交流群"></a></p>
</div>
<!--此段可直接删除-结束-->

</body>
</html>