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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知