jquery图片放大器插件

浏览数：21 / 时间：2015年06月09日

将鼠标移动到一张图片上来的时候,放大该图片的某些细节.

<html>
<head>
    <script src="../js/jquery-1.6.js" type="text/javascript"></script>
    <script src="../js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
    </head>
<body>
    
    <a href="1.jpg" class="jqzoom" rel=‘gal1‘ style="" title="">
  <img src="1.jpg" border="0" style="border: 1px solid #666;"  title="" width="100px" height="100px">
  </a>

    </body>
<script type="text/javascript">
    $(document).ready(function() {
        $(‘.jqzoom‘).jqzoom({
                zoomType: ‘standard‘,
                lens:true,
                preloadImages: false,
                alwaysOn:false
            });
        
    });
</script>

</html>

 

如果要做成商城产品图片预览的效果,当点击下面的图片时,上面的图片跟着发生变化.

<a  href=‘javascript:void(0);‘ rel="{gallery: ‘gal1‘, smallimage: ‘./imgProd/triumph_small3.jpg‘,largeimage: ‘./imgProd/triumph_big3.jpg‘}"><img src=‘imgProd/thumbs/triumph_thumb3.jpg‘></a>

需要设置href和rel才会动态的放大当前展示的图片。 要求jquery-1.6.js，jquery-1.9.1不支持。

 

 demo下载地址http://files.cnblogs.com/simpledev/jquery%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7%E5%99%A8%E6%8F%92%E4%BB%B6demo.rar

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 图片 jquery r 插件 j query 图片 jquery r 插件 j query

相关文章

随机文章

您可能还喜欢

您可能还喜欢