建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery放大镜插件jquery.jqzoom.js

来源:易助科技网浏览量:16收藏

简介


jquery.jqzoom.js是一款JQuery放大镜插件,将鼠标放置在图片的某一点上时可以在右侧单独显示此点附近放大的图像,用于需要局部放大功能的场合。


JQuery放大镜插件jquery.jqzoom.js-示例图



使用


1  jquery.js 和 jqzoom.js 文件


2.  HTML


<a href="images/big.jpg" style="" title="kawasaki">
  <img src="images/small.jpg"  title="kawasakigreen" style="border: 1px solid #666;">
</a>

[css]
<style>
.jqzoom{border:1px solid black;float:left;position:relative;padding:0px;cursor:pointer;}
.jqzoom img{float:left;}
div.zoomdiv {z-index: 100;position:absolute;top:0px;left:0px;width:200px;height:200px;
    background: #ffffff;border:1px solid #CCCCCC;display:none;text-align: center;
    overflow: hidden;}
div.jqZoomPup {z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:50px;
    height:50px;border:1px solid #aaa;background:#ffffff url(../images/zoom.gif) 50% top  no-repeat;
    opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;filter: alpha(Opacity=50);}
</style>    
[/css]


3.  调用


<script>$(function () {$('.jqzoom').jqzoom();});</script>



相关链接


在线演示:https://www.jq22.com/yanshi648

GitHub 地址 :https://github.com/mrenzidev/jqzoom