`
htj1231825
  • 浏览: 38520 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery的jqzoom插件的两种使用方法

阅读更多
第一种实现的方法
注意:本方法用的是jqzoom.pack.1.0.1.js

<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
	<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style/jqzoom.css" >
	<style type="text/css">
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
    $(".jqzoom").jqzoom({
        xzoom: 300, //设置放大 DIV 长度(默认为 200)
        yzoom: 300, //设置放大 DIV 高度(默认为 200)
        offset: 10, //设置放大 DIV 偏移(默认为 10)
        position: "right", //设置放大 DIV 的位置(默认为右边)
         preload:1,
        lens:1
    });
	});

	</script>

<div>
		<a href="images/pro_img/blue_one_big.jpg" class="jqzoom">
			<img  src="images/pro_img/blue_one_small.jpg" title=""/>
		</a>
		</div>



第二种方法
	<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
	<script src="js/jquery.jqzoom.js" type="text/javascript"></script>
	<style type="text/css">
	div.zoomdiv {
	z-index:	999;
	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                 : 999;
	visibility              : hidden;
	position                : absolute;
	top:0px;
	left:0px;
	width                   : 50px;
	height                  : 50px;
	border: 1px solid #aaa;
	background: #ffffff url(../images/zoomlens.gif) 50% top  no-repeat;;
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(Opacity=50);
}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //设置放大 DIV 长度(默认为 200)
        yzoom: 300, //设置放大 DIV 高度(默认为 200)
        offset: 10, //设置放大 DIV 偏移(默认为 10)
        position: "right", //设置放大 DIV 的位置(默认为右边)
         preload:1,
        lens:1
    });
	});

	</script>

<div  class="jqzoom">
			<img  src="images/pro_img/blue_one_small.jpg" jqimg="images/pro_img/blue_one_big.jpg"/>
		</div>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics