图片放大显示

刚在网上看到一个的放大图片的显示，觉得以后用得着，先存下来。

要准备一张小图和一张清晰点的大图,然后在页面中引入JQUERY和这个插件的JS

<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

然后再引入一个CSS

<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">

接着是两张大图和小图

<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">   <img src="kawasakigreen_small.jpg" border="0" style="border: 1px solid #666;"  title="kawasakigreen"></a>

这里注意的是一张大图,一张小图,并且"kawasakigreen_small.jpg"这个小图中,那个title是要出现在放大镜里的文字标题

然后在JS中

<script type="text/javascript">

$(function() {

  var options3 = {zoomWidth: 200, zoomHeight: 200, xOffset: 20, title: false,lens:false }

$(".jqzoom").jqzoom(options3); }); </script>

这里就是放大镜的效果了，具体的文档和例子请参考

http://www.mind-projects.it/projects/jqzoom/index.php#howtouse

如果觉得不够详细请仔细参考文档

转载于:https://www.cnblogs.com/bingrong/p/3269479.html