码迷,mamicode.com
首页 > 其他好文 > 详细

图片放大镜查看

时间:2015-02-27 13:43:41      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

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


<html>

<head>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/jqzoom.pack.1.0.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jqzoom.css"/>
</head>
<body>
<a href="/img/big.jpg" class="jqzoom" style="" title="kawasaki">
  <img src="/img/small.jpg" border="0" style="border: 1px solid #666;"  title="kawasakigreen">
  </a>
</body>
<script type="text/javascript">
$(function() {
var options3 =
{
   zoomWidth: 300,
   zoomHeight: 300,
   xOffset: 20,
   title: false,
   lens:false

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

</html>


jqzoom插件下载地址:

http://download.csdn.net/detail/lluohuih/8460393

图片放大镜查看

标签:

原文地址:http://blog.csdn.net/lluohuih/article/details/43965269

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!