jquery的jqzoom插件实现类似淘宝放大镜效果

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_30776863

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量72

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/xph7755/p/3860372.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--引入的资源文件 可在下面的官网上下载-->
<link rel="stylesheet" type="text/css" href="jquery.jqzoom.css">
<script type='text/javascript' src='jquery-1.6.js'></script>  
<script type='text/javascript' src='jquery.jqzoom-core.js'></script>
<script type="text/javascript">
/*
    $(document).ready(function(){  
    $('#girl').jqzoom();  
});*/
$(document).ready(function(){  
       /*定义显示的放大镜样式，可作为jqzoom(options)参数
    var options = {  
            zoomType: 'standard',  
            lens:true,  
            preloadImages: true,  
            alwaysOn:false,  
            zoomWidth: 300,  
            zoomHeight: 250,  
            xOffset:90,  
            yOffset:30,  
            position:'left'  
            //...MORE OPTIONS  
    };*/
    $('.MYCLASS').jqzoom();  
});    
</script>
</head>

<body>
<!--<a href="2.png" id="girl" title="美女高清大图">  
    <img src="1.png" title="小图">  
</a>-->
<div style="position:relative; float:left; width:400px; height:200px">
<!--gal1是为了点多张图片能显示在同个区域下而设置的，-->
<a href="2.png" class="MYCLASS" title="MYTITLE" rel="gal1">  
    <img src="1.png" title="IMAGE TITLE">  
</a>

</div>
<hr/>
<ul style=" clear:left; ">
<li style=" float:left">
<!--这里的class是官方固定写法-->
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '1.png',largeimage: '2.png'}">
    <img src="1.png">  
</a></li>

<li style=" float:left">
<a  href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '3.png',largeimage: '4.png'}">
    <img src="3.png"> 
</a></li>
</ul>

<!--样式一般般。没调整了。具体可以去官网上看看示例http://www.mind-projects.it/projects/jqzoom/index.php#documentation还有多钟类似效果-->

  
</body>
</html>

--------------------------END----------------

转载于:https://www.cnblogs.com/xph7755/p/3860372.html

weixin_30776863

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的jqzoom插件实现类似淘宝放大镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><...
复制链接

扫一扫