分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果。效果图如下:在线预览 源码下载实现的代码。html代码: <div class="page-b ...
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="page-body"> <div style="width: 80px; height: 80px; margin-right: 10px; padding: 10px; float: left; background: green;"> 点我看看!!!</div> <div style="width: 100px; height: 50px; position: absolute; right: 50px; top: 250px; background: red;"> 点我看看!!! <div style="width: 80px; height: 100px; position: relative; left: -50px; top: 200px; padding: 10px; margin-left: 50px; background: blue;"> 点我看看!!!</div> </div> </div> <script src='/images/loading.gif' data-original="js/zoom.js"></script> <script> document.querySelector('.page-body').addEventListener('click', function (event) { event.preventDefault(); zoom.to({ element: event.target }); });</script>
原标题:基于jQuery点击图像居中放大插件Zoom
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。