- 浏览: 40160 次
- 性别:
- 来自: 北京
最新评论
-
fengzhaoyang:
serverMessage.jsp 代码不全吧客户端的jsp页 ...
基于DWR的点对点聊天实现 server---client
第一种实现的方法
注意:本方法用的是jqzoom.pack.1.0.1.js
第二种方法
注意:本方法用的是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_ev1.0.1.zip (509.6 KB)
- 下载次数: 75
- 第二种.rar (29.5 KB)
- 下载次数: 31
发表评论
-
阿里巴巴JAVA开发手册
2017-02-13 13:48 612目录 一 、编程规约 编程规约 ............... ... -
druid 数据库密码加密
2017-01-23 14:59 417cmd命令: 1、切换的druid-0.2.9.jar包所在目 ... -
基于DWR的点对点聊天实现 server---client
2015-04-27 17:23 2327RemoteMessageServer 客服类 packa ... -
spring mvc 表单提交controller中文乱码
2015-03-02 16:11 1979用spring的编码器过滤所有请求,但还是有问题,最后发现是表 ... -
Hibernate hql left join
2015-01-30 17:13 11421.配置映射关系 2.from A表 left join A表 ... -
ajax 提交表单数据 到action
2015-01-27 15:11 546$.ajax({ url:'showDe ... -
easyui
2015-01-21 17:43 797$(function(){ var pageCou ... -
Jquery ImageMapste Map area
2015-01-09 09:29 806ImageMapste 可以给Map Area 添加背景色 ... -
Flex Repeater
2014-02-20 18:35 469<mx:VBox x="674" ... -
Flex Struts2 fileupload上传文件
2014-02-20 18:33 772file=new FileReference(); ... -
Myeclipse提示Jquery
2011-08-31 11:22 989项目右键properties MyEclipse -> ... -
java获取土豆视频
2011-04-02 14:03 1135通过JAVA获取土豆视频,现在很多社会网站都有这个功能,用户输 ... -
flex鱼眼菜单
2011-03-31 10:46 1825flex鱼眼菜单 -
datagrid 套combobox
2011-03-29 15:20 876<mx:DataGridColumn headerTex ... -
Web开发人员必备的20款超赞的jQuery插件
2011-02-24 08:51 788中文:http://sd.csdn.net/a/2011021 ... -
Oracle修改默认数据库,及启动关闭命令,查询连接的当前数据库
2011-02-22 09:55 2781Oracle Windows平台修改默认sid假如window ... -
JQuery的thickbox插件,弹出窗
2011-02-17 11:29 855http://jquery.com/demo/thickbox ... -
jQuery的appendto()移动
2011-02-16 09:45 1308var $self = obj.find("u ... -
flex 饼图缓动
2011-02-09 10:32 1271<?xml version="1.0&qu ... -
jquery图片动态加载示例
2011-01-25 09:39 2208<!DOCTYPE html PUBLIC &quo ...
相关推荐
3. **两种模式**:jqZoom支持两种工作模式——内部模式(inline mode)和外部模式(rel mode)。内部模式下,放大镜内置于原始图片;外部模式下,放大镜作为一个独立元素,通过`rel`属性与原始图片关联。 4. **...
3. JavaScript初始化:使用jQuery选择器找到这两个元素,并调用jqZoom插件,指定相应的参数,如放大倍数、放大镜的宽度和高度等。 4. CSS样式:调整放大镜的外观,包括边框、背景色、透明度等,使其与页面风格协调...
本文将详细介绍jqzoom插件的使用方法、原理以及常见问题的解决策略。 首先,jqzoom的核心是基于jQuery库的,因此在使用前需要确保页面已经引入了jQuery。你可以通过CDN链接或者本地文件的方式引入,例如: ```html...
下面我们将详细探讨JQZoom的工作原理、使用方法以及如何将其整合到你的项目中。 **一、JQZoom介绍** JQZoom是一种基于jQuery库的插件,它通过添加一个浮动的放大镜效果,使用户在不离开当前页面的情况下查看图片的...
- **引入资源**:首先需要在页面中引入jQuery库和jqZoom插件的JavaScript文件,通常还会有相应的CSS样式文件。 - **HTML结构**:设置主图和放大镜的HTML结构。主图通常使用`<img>`标签,放大镜则是一个具有`href`...
通过理解jQuery的基本原理和jQueryZoom的使用方法,开发者可以轻松地将这个功能集成到自己的项目中,提升网站的交互性和用户体验。在实际应用中,可以根据需求调整参数,实现个性化的图片放大效果。
接着,在页面加载完成后,我们引入jQuery库和jqZoom插件,并在JavaScript中调用jqZoom方法,将主图片和放大镜区域关联起来。例如: ```javascript $(document).ready(function() { $('.jqzoom').jqzoom({ ...
要使用jqZoom插件,首先需要在项目中引入jQuery库和jqZoom的JavaScript及CSS文件。通常,这些文件可以从官方或者第三方资源站点(如jb51.net)下载。将它们放置在正确的位置,并确保在HTML文档中正确链接。 ```html...
总的来说,jQuery.jqZoom插件是实现网页图片悬浮放大镜功能的利器,它结合了jQuery的便利性和JavaScript的灵活性,为用户提供了便捷的图片查看方式,同时为开发者提供了丰富的定制可能性。在实际应用中,开发者可以...
在网页设计中,为了提升用户体验,常常需要实现图片放大镜效果,使得用户能...总的来说,jqzoom插件为开发者提供了一种简单且高效的方法来实现图片放大镜效果,提高了用户的浏览体验,是网页设计中值得推荐的一款工具。
总的来说,"zencart 图片放大插件集成版 JQLightBox+JQZoom" 是一个旨在提升 Zencart 商店产品图片展示效果的工具,通过集成两种流行的图片查看技术,它为用户提供了一个更丰富、更直观的产品浏览环境,从而可能提高...
jqZoom是一种基于jQuery库的插件,它允许用户在鼠标悬停在小图上时,显示一个大图的放大视图。这种效果常见于电子商务网站的产品展示,用户可以无需离开当前页面就能查看产品细节。jqZoom的核心原理是利用CSS和...
4. **JavaScript初始化**:使用jQuery选择器找到主图元素,并调用jqZoom插件方法,设置相关的选项,如放大镜的透明度、宽度、高度等。 5. **事件监听**:jqZoom会自动监听用户的鼠标移动事件,根据鼠标位置实时更新...
在页面加载完成后,使用jQuery选择器找到元素并初始化jqZoom插件: ```javascript $(document).ready(function() { $("#imgZoom").jqZoom({ zoomType: "standard", lensSize: 150, preloadImages: true }); ...
2. **引入jqZoom插件**:接着,引入jqZoom的JavaScript和CSS文件。 3. **HTML结构**:为要应用放大效果的图像添加特定的HTML结构,通常包含两个图像元素,一个是原图,另一个是用于放大效果的隐藏图。 4. **应用...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
要使用jqZoom,首先需要在项目中引入jQuery库和jqZoom插件的JavaScript及CSS文件。接着,需要对目标图片元素应用特定的类名,例如`jqzoom`,并指定对应的放大图片路径。以下是一个基本的HTML结构示例: ```html <!...
综合上述信息,jqZoom和jCarousel的结合使用为网站提供了一种交互式的图片展示方式,用户既可以查看图片的详细信息,也可以方便地浏览多张图片。这两个工具在网页设计中非常常见,尤其适用于产品展示或者画廊应用。...