鼠标前后滚动实现图片的放大和缩小预览。
继承ext.panel实现自己的图片预览类imagePreview:
imagePreview.js
/**
* 继承Panel组件，用于图像预览
*
* @author centre
* @class ImgView
* @extends Ext.Panel
*/
ImgView = Ext.extend(Ext.Panel, {
height : 540,
width : 500,
cls : "background:blue;",
img_index : 0,
img_view_id : this.id + '_img',
/**
* 设置显示图像的偏移量，根据传入的参数选择应该显示的图片的id
*
* @author centre
* @param {}
* offset 偏移量为整数
*/
setImg : function(offset) {
if (offset == 1 && Ext.getCmp(this.id + '_next_btn').disabled != true) {
this.img_index = this.img_index + offset;
}
if (offset == -1 && Ext.getCmp(this.id + '_pre_btn').disabled != true) {
this.img_index = this.img_index + offset;
}
if (this.img_index <= 0) {
Ext.get(this.img_view_id).dom.src = this.src[0];
// this.img_index =this.src.length-1;
} else if (this.img_index >= this.src.length) {
Ext.get(this.img_view_id).dom.src = this.src[this.src.length - 1];
// this.img_index = 0;
} else {
Ext.get(this.img_view_id).dom.src = this.src[this.img_index];
}
Ext.getCmp(this.id + '_next_btn').disabled = ((this.img_index) == this.src.length)
? true
: false;
Ext.getCmp(this.id + '_pre_btn').disabled = ((this.img_index) <= 0)
? true
: false;
// this.img_index = this.img_index + offset;
},
/**
* 构造函数，根据传入的json对象初始化组件，新增了一个src的配置参数
*
* @author centre
*/
initComponent : function() {
var cmp = this;
var length = this.src.length;
this.html = '<img id=\'' + this.img_view_id + '\' src=\'' + this.src[0]
+ '\' ></img>';
this.bbar = [{
text : "上一张",
id : this.id + '_pre_btn',
handler : function(e, b) {
cmp.setImg(-1);
}
}, {
text : "下一张",
id : this.id + '_next_btn',
handler : function(e, b) {
cmp.setImg(1);
}
}];
ImgView.superclass.initComponent.call(this);
},
/**
* ImageView渲染后，通过监听图片上的鼠标滚轮事件将图片放大或者缩小
*
* @author centre
* @return null
*/
afterRender : function() {
ImgView.superclass.afterRender.call(this);
Ext.get(this.img_view_id).parent = this;
Ext.get(this.img_view_id).center();
new Ext.dd.DD(Ext.get(this.img_view_id), 'pic');
Ext.get(this.img_view_id).dom.title = '鼠标滚轮控制图片的放大和缩小';
Ext.get(this.img_view_id).on({
'dblclick' : {
fn : function() {
Ext.get(this).parent.zoom(Ext.get(this), 1.5, true);
}
},
'mousewheel' : {
fn : function(e) {
var delta = e.getWheelDelta();
if (delta > 0) {
Ext.get(this).parent.zoom(Ext.get(this), 1.5,
true);
} else {
Ext.get(this).parent.zoom(Ext.get(this), 1.5,
false);
}
}
}
});
},
/**
* 图片放大和缩小
*
* @param {}
* el 一个dom对象
* @param {}
* offset 放大或者缩小的偏移量
* @param {}
* type true为放大，false为缩小
*/
zoom : function(el, offset, type) {
var width = el.getWidth();
var height = el.getHeight();
var nwidth = type ? (width * offset) : (width / offset);
var nheight = type ? (height * offset) : (height / offset);
var left = type ? -((nwidth - width) / 2) : ((width - nwidth) / 2);
var top = type ? -((nheight - height) / 2) : ((height - nheight) / 2);
el.animate({
height : {
to : nheight,
from : height
},
width : {
to : nwidth,
from : width
},
left : {
by : left
},
top : {
by : top
}
}, null, null, 'backBoth', 'motion');
}
});
使用该类：
image.js：
Ext.onReady(function() {
var img1 = new ImgView({
src : ['images/preview/001.jpg',
"images/preview/002.jpg",
'images/preview/003.jpg',
"images/preview/004.jpg",
'images/preview/005.jpg',
"images/preview/006.jpg",
'images/preview/007.jpg',
"images/preview/008.jpg"],
title : '图片浏览'
});
// alert(img1.img_index);
var main_panel = new Ext.Panel({
title : '图片预览',
el : 'main_panel',
autoHeight : true,
bodyBorder : false,
collapsible : true,
renderTo : Ext.getBody(),
items : [img1]
});
});
jsp页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>hikvisionxxx</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="csslib/index.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<script type="text/javascript" src="jslib/imagePreview.js">
</script>
<script type="text/javascript" src="jslib/image.js">
</script>
</head>
<body>
<div id="main_panel"></div>
</body>
</html>
分享到：
相关推荐
综上所述，这个“Extjs之--图片浏览器”项目涉及到了Ext JS的组件使用、数据绑定、样式设计、用户交互等多个方面，为开发者提供了一种用JavaScript实现图片浏览功能的解决方案。通过阅读提供的博客文章和分析...
2. **图片查看器组件**：此项目中的图片查看器是一个EXTJS组件，它允许用户浏览和操作图片，包括放大、缩小、旋转、平移等操作，提供类似于桌面应用的用户体验。这种组件在网页中展示大量图片时非常有用，如在线相册...
本文将深入探讨ExtJS图片渲染的效果及其应用。 首先，我们要了解ExtJS中的图片渲染基础。在ExtJS中，图片通常以`Image`组件的形式出现，它可以方便地嵌入到布局中，如面板（Panel）、工具栏（Toolbar）或表单（Form...
本教程将深入探讨如何在ExtJS中实现图片的批量上传功能，以及与之相关的批量删除操作。 首先，批量上传图片的核心是利用HTML5的File API，它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...
ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件，它允许开发者在按钮上显示图片，以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素，比如导航按钮或者操作按钮。下面我们将深入探讨...
漂亮的Extjs图片展示组件实例，类似于幻灯片，可直接拿去用，非常不错的哦
在"Extjs图片上传 带过滤和缩略图"这个主题中，我们将深入探讨如何使用ExtJS实现图片上传功能，同时结合过滤和缩略图显示，以提升用户体验。 1. **图片上传组件**： 在ExtJS中，可以使用`Ext.form.FileField`或`...
在ExtJS应用中，这些PNG图标可以通过CSS样式或者JavaScript代码直接引用，以实现界面的个性化定制。 在实际开发中，我们可以按照以下步骤使用这些图标： 1. **资源引入**：首先，将下载的"extjs-ico"文件夹放置在...
在EXTJS框架中，图片上传功能是一个常见的需求，尤其在构建富客户端应用时。EXTJS提供了强大的组件模型，使得开发...以上就是EXTJS图片上传功能的基本实现流程，通过前后端的协作，可以实现高效且安全的图片上传功能。
在实现这个图片浏览器的过程中，开发者可能使用了以下核心ExtJS4组件和技术： 1. **Panel（面板）**：作为应用的基本容器，图片浏览器通常由多个Panel组成，每个Panel可以承载不同的功能，如导航栏、图片展示区、...
在ExtJS 2.x版本中，实现文件上传组件是一项常见的需求，它允许用户在Web应用中选择并上传本地文件到服务器。在本文中，我们将深入探讨如何在ExtJS 2.x中实现这一功能。 首先，我们需要理解ExtJS中的FormPanel组件...
这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先，我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...
在本文中，我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能。ExtJs是一款强大的JavaScript库，专用于构建富客户端应用程序，它提供了丰富的组件和强大的数据管理能力，非常适合处理图像操作。 ...
最近小弟做了Extjs实现实现下拉框联动的效果，参考了好久才学会，闲下来发一个简单的例子。。呵呵
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
1 、Hibernate自动生成表，请在数据库里先创建一个duhaibin库 ，要是想用其他的话，请在Hibernate.cfg.xml里面配置下 在跑项目之前，首先在你机子的D盘上创建一个JSB的文件夹和一个TEMP.txt文件
这个主题主要关注如何在ExtJS的HTMLEditor中实现图片的上传和添加网络图片功能。 首先，理解ExtJS HTMLEditor的基本结构和工作原理是至关重要的。HTMLEditor是一个组件，它可以将HTML代码作为输入，并提供类似于...
在这个"ExtJS实现聊天功能"的项目中，我们将探讨如何利用ExtJS框架构建一个类似于QQ的聊天应用程序。 首先，我们要理解聊天功能的核心要素。一个基本的聊天应用通常包含以下部分： 1. **用户界面**：ExtJS提供了...
在这个特定的场景中，我们要探讨的是如何在ExtJS中实现一个登录验证系统，特别是涉及到验证码的生成和验证。 验证码（CAPTCHA）是一种防止恶意自动化程序（如机器人）进行非法操作的安全机制。它通常要求用户输入...