`
htj1231825
  • 浏览: 40160 次
  • 性别: 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>
分享到:
评论

相关推荐

    jqzoom插件

    3. **两种模式**:jqZoom支持两种工作模式——内部模式(inline mode)和外部模式(rel mode)。内部模式下,放大镜内置于原始图片;外部模式下,放大镜作为一个独立元素,通过`rel`属性与原始图片关联。 4. **...

    jquery jqzoom京东商城商品详细页面图片放大镜

    3. JavaScript初始化:使用jQuery选择器找到这两个元素,并调用jqZoom插件,指定相应的参数,如放大倍数、放大镜的宽度和高度等。 4. CSS样式:调整放大镜的外观,包括边框、背景色、透明度等,使其与页面风格协调...

    jQuery之jqzoom(图片放大镜插件)

    本文将详细介绍jqzoom插件的使用方法、原理以及常见问题的解决策略。 首先,jqzoom的核心是基于jQuery库的,因此在使用前需要确保页面已经引入了jQuery。你可以通过CDN链接或者本地文件的方式引入,例如: ```html...

    jquery的JQZoom效果

    下面我们将详细探讨JQZoom的工作原理、使用方法以及如何将其整合到你的项目中。 **一、JQZoom介绍** JQZoom是一种基于jQuery库的插件,它通过添加一个浮动的放大镜效果,使用户在不离开当前页面的情况下查看图片的...

    jquery插件-图片放大器 jqzoom

    - **引入资源**:首先需要在页面中引入jQuery库和jqZoom插件的JavaScript文件,通常还会有相应的CSS样式文件。 - **HTML结构**:设置主图和放大镜的HTML结构。主图通常使用`&lt;img&gt;`标签,放大镜则是一个具有`href`...

    jqzoom jquery

    通过理解jQuery的基本原理和jQueryZoom的使用方法,开发者可以轻松地将这个功能集成到自己的项目中,提升网站的交互性和用户体验。在实际应用中,可以根据需求调整参数,实现个性化的图片放大效果。

    Jquery.jqzoom + jcarousel 实现图片滚动和局部图片放大镜效果

    接着,在页面加载完成后,我们引入jQuery库和jqZoom插件,并在JavaScript中调用jqZoom方法,将主图片和放大镜区域关联起来。例如: ```javascript $(document).ready(function() { $('.jqzoom').jqzoom({ ...

    jqzoom 放大镜插件

    要使用jqZoom插件,首先需要在项目中引入jQuery库和jqZoom的JavaScript及CSS文件。通常,这些文件可以从官方或者第三方资源站点(如jb51.net)下载。将它们放置在正确的位置,并确保在HTML文档中正确链接。 ```html...

    悬浮放大镜--jquery.jqzoom

    总的来说,jQuery.jqZoom插件是实现网页图片悬浮放大镜功能的利器,它结合了jQuery的便利性和JavaScript的灵活性,为用户提供了便捷的图片查看方式,同时为开发者提供了丰富的定制可能性。在实际应用中,开发者可以...

    基于jQuery插件jqzoom实现的图片放大镜效果示例

    在网页设计中,为了提升用户体验,常常需要实现图片放大镜效果,使得用户能...总的来说,jqzoom插件为开发者提供了一种简单且高效的方法来实现图片放大镜效果,提高了用户的浏览体验,是网页设计中值得推荐的一款工具。

    zencart 图片放大插件集成版 JQLightBox+JQZoom

    总的来说,"zencart 图片放大插件集成版 JQLightBox+JQZoom" 是一个旨在提升 Zencart 商店产品图片展示效果的工具,通过集成两种流行的图片查看技术,它为用户提供了一个更丰富、更直观的产品浏览环境,从而可能提高...

    图片放大镜插件:jqzoom

    jqZoom是一种基于jQuery库的插件,它允许用户在鼠标悬停在小图上时,显示一个大图的放大视图。这种效果常见于电子商务网站的产品展示,用户可以无需离开当前页面就能查看产品细节。jqZoom的核心原理是利用CSS和...

    jqzoom实现京东商品详细页产品图片放大镜效果.zip

    4. **JavaScript初始化**:使用jQuery选择器找到主图元素,并调用jqZoom插件方法,设置相关的选项,如放大镜的透明度、宽度、高度等。 5. **事件监听**:jqZoom会自动监听用户的鼠标移动事件,根据鼠标位置实时更新...

    Jquery图片局部放大

    在页面加载完成后,使用jQuery选择器找到元素并初始化jqZoom插件: ```javascript $(document).ready(function() { $("#imgZoom").jqZoom({ zoomType: "standard", lensSize: 150, preloadImages: true }); ...

    jqzoom_ev_脚本实例_

    2. **引入jqZoom插件**:接着,引入jqZoom的JavaScript和CSS文件。 3. **HTML结构**:为要应用放大效果的图像添加特定的HTML结构,通常包含两个图像元素,一个是原图,另一个是用于放大效果的隐藏图。 4. **应用...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jqzoom图片放大器代码,适合产品图片的展示,兼容主流浏览器

    要使用jqZoom,首先需要在项目中引入jQuery库和jqZoom插件的JavaScript及CSS文件。接着,需要对目标图片元素应用特定的类名,例如`jqzoom`,并指定对应的放大图片路径。以下是一个基本的HTML结构示例: ```html &lt;!...

    jqzoom + jcarousel图片展示

    综合上述信息,jqZoom和jCarousel的结合使用为网站提供了一种交互式的图片展示方式,用户既可以查看图片的详细信息,也可以方便地浏览多张图片。这两个工具在网页设计中非常常见,尤其适用于产品展示或者画廊应用。...

Global site tag (gtag.js) - Google Analytics