1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery点击图片放大可拖动查看效果

一款十分简单的jQuery的代码:点击图片放大可拖动查看效果,支持放大缩小图片预览,图片放大后(可拖动大图浏览)效果。

js代码下载地址:

https://www.qiquanji.com/js/jquery.js

https://www.qiquanji.com/js/jquery.imageView.js

图片放大前:

图片放大后(可拖动图片浏览):

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">      <title></title>      <script type="text/javascript" src="../js/jquery.js"></script>      <script type="text/javascript" src="../js/jquery.imageView.js"></script>      <script type="text/javascript">          $(function () {              $('#imageView_container').imageView({ width: 590, height: 640 });          });      </script>      <style type="text/css">            body {              background-color: #555;              color: #fff;          }            a img {              border: none;          }            #imageView_container {              border: 2px solid #000;              margin: 0 auto;          }                #imageView_container.iv-loading {                  border: 2px solid #ff6600;              }      </style>  </head>  <body>      <div id="imageView_container" class="" style="width: 590px; height: 640px; overflow: hidden; position: relative; cursor: -moz-zoom-in;">          <img src="https://www.qiquanji.com/data/img/dmj/201905031556844305650117.jpg" rel="https://www.qiquanji.com/data/img/dmj/201905031556844332206766.jpg" alt="" id="image_view_1" style="visibility: visible; position: absolute; left: 0px; top: 0px;">      </div>  </body>  </html>

原文链接:https://www.qiquanji.com/post/7047.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: