功能:双击页面图片弹出一个内含图片窗口,可进行全方位调整和拖拽
特点:
- 基于Ext-core,面向组件形式开发,不会与其它JS发生冲突
- 支持主流浏览器,已测试ie6、FF、chrome
- 全局单例模式,部分组件重用,事件注册优化,最大限度降低内存消耗
- 精心布局,考虑了页面存在滚动条的情况
- 使用特别简单
使用方法:
1.让页面加载完毕后执行初始化函数:
Ext.onReady(function(){
Ext.ux.ImageView.init();
});
2.为需要提供图片浏览功能的img添加class:resizable
<img src="wow.jpg" class="resizable"/>
预览:
附件例子可直接使用浏览器打开查看
//扩展下Ext.Element
(function(){
var D = Ext.lib.Dom;
Ext.apply(Ext.Element.prototype, {
//全屏幕居中,该元素必须为body的直接子元素,且为绝对定位;
center: function(){
var xy = [D.getViewportWidth(), D.getViewportHeight()];
var x = Ext.getBody().getScroll().left + (xy[0] - this.getWidth()) / 2;
var y = Ext.getBody().getScroll().top + (xy[1] - this.getHeight()) / 2;
this.setXY([x, y]);
}
});
}())
/**
* 功能:双击页面图片弹出一个内含图片窗口,可进行全方位调整和拖拽
*
* @author chemzqm@gmail.com
* @version 1.0
* @since 2010-4-30
*/
Ext.ns('Ext.ux');
Ext.ux.ImageView = function(){
return {
init: function(){
this.initMask();
Ext.getBody().on('dblclick', function(e, t, o){
var img = Ext.fly(t);
if (img.hasClass('resizable')) {
this.viewImg = Ext.getBody().createChild({
tag: 'img',
cls: 'dd-view'
});
this.viewImg.dom.src = img.getAttribute('src');
this.el = this.viewImg.wrap({
tag: 'div',
id: 'mywrap'
});
this.el.setWidth(img.getWidth());
this.el.setHeight(img.getHeight());
this.el.setStyle({
position: 'absolute',
zIndex: 3000,
cursor: 'move'
});
this.el.center();
this.createMakeUp();
this.initEvent();
}
}, this, {
delegate: 'img'
});
}
}
}();
Ext.apply(Ext.ux.ImageView, {
initMask: function(){
var d = Ext.lib.Dom, w = d.getViewWidth(true), h = d.getViewHeight(true);
this.mask = Ext.getBody().createChild({
cls: 'dd-mask'
});
this.mask.setWidth(w);
this.mask.setHeight(h);
this.frame = Ext.DomHelper.insertBefore(this.mask, '<iframe class="dd-frame" frameborder="0"></iframe>', true);//创建夹层
this.frame.setWidth(w);
this.frame.setHeight(h);
this.mask.hide();
this.frame.hide();
},
createMakeUp: function(){
this.mask.show();
this.frame.show();
var head = this.el.createChild({
cls: 'dd-header'
});
this.closeEl = head.createChild({
tag: 'button',
cls: 'dd-close',
html: '关闭'
});
this.creatProxy(this.el);
},
initEvent: function(){
this.closeEl.on('click', this.onDestroy, this);
Ext.getBody().on('mousedown', this.onMousedown, this, {
delegate: 'span'
});
Ext.getBody().on('mouseup', this.onMouseup, this);
Ext.getBody().on('click', this.onMouseup, this);
this.el.on('mousedown', this.stratMove, this);
this.el.on('mouseup', this.endMove, this);
this.el.on('click', this.endMove, this);
this.el.on('mousemove', this.onMove, this);
},
stratMove: function(e, t, o){
if (!Ext.fly(t).hasClass('dd-inner')) {
return;
}
this.begin = {
x: e.getPageX(),
y: e.getPageY(),
ex: this.el.getLeft(),
ey: this.el.getTop()
}
this.moving = true;
this.el.on('mousemove', this.onMove, this);
},
onMove: function(e, t, o){
if (!this.moving) {
return false;
}
e.preventDefault();
var dx = e.getPageX() - this.begin.x;
var dy = e.getPageY() - this.begin.y;
this.el.setX(this.begin.ex + dx);
this.el.setY(this.begin.ey + dy);
this.el.focus();
},
endMove: function(){
this.moving = false;
},
onMousedown: function(e, t, o){
e.preventDefault();
this.begin = {
x: e.getPageX(),
y: e.getPageY(),
ex: this.el.getLeft(),
ey: this.el.getTop(),
ew: this.el.getWidth(),
eh: this.el.getHeight(),
id: t.id
};
this.handler = Ext.get(t);
Ext.getBody().on('mousemove', this.onMouseMove, this);
},
onMouseMove: function(e, t, o){
e.preventDefault();
var dx = e.getPageX() - this.begin.x;
var dy = e.getPageY() - this.begin.y;
this.resize(this.begin.id, dx, dy);
this.adjustInner();
},
onMouseup: function(e, t, o){
Ext.getBody().un('mousemove', this.onMouseMove, this);
},
//让内部区调整宽高
adjustInner: function(){
this.proxy.setHeight(this.el.getHeight() + 10);
this.proxy.setWidth(this.el.getWidth() + 10);
},
resize: function(type, dx, dy){
var x = this.begin.ex;
var y = this.begin.ey;
var w = this.begin.ew;
var h = this.begin.eh;
var me = this.el;
var lx = dx > 0 ? true : false;
var ly = dy > 0 ? true : false;
switch (type) {
case 'tl':{
if (lx !== ly) {
return;
}
me.setStyle('left', x + dx + 'px');
me.setStyle('top', y + dy + 'px');
me.setWidth(w - dx);
me.setHeight(h - dy);
break;
}
case 'tr':{
if (lx === ly) {
return;
}
me.setStyle('top', y + dy + 'px');
me.setWidth(w + dx);
me.setHeight(h - dy);
break;
}
case 'bl':{
if (lx === ly) {
return;
}
me.setStyle('left', x + dx + 'px');
me.setWidth(w - dx);
me.setHeight(h + dy);
break;
}
case 'br':{
if (lx !== ly) {
return;
}
me.setWidth(w + dx);
me.setHeight(h + dy);
break;
}
case 't':{
me.setStyle('top', y + dy + 'px');
me.setHeight(h - dy);
break;
}
case 'b':{
me.setHeight(h + dy);
break;
}
case 'l':{
me.setStyle('left', x + dx + 'px');
me.setWidth(w - dx);
break;
}
case 'r':{
me.setWidth(w + dx);
break;
}
}
if (Ext.isIE6) {//垃圾ie6,子元素高度不会自适应
var eh = this.el.getHeight();
this.viewImg.setHeight(eh);
}
return;
},
creatProxy: function(el){
this.proxy = el.createChild({
cls: 'dd-proxy',
children: [{
cls: 'dd-inner'//ie需要一个透明元素遮挡,否则选定元素不一样
}, {
id: 'tl',
tag: 'span',
cls: 'dd-anchor dd-anchor-tl'
}, {
id: 'tr',
tag: 'span',
cls: 'dd-anchor dd-anchor-tr'
}, {
id: 'bl',
tag: 'span',
cls: 'dd-anchor dd-anchor-bl'
}, {
id: 'br',
tag: 'span',
cls: 'dd-anchor dd-anchor-br'
}, {
id: 'l',
tag: 'span',
cls: 'dd-handler dd-border-l'
}, {
id: 'r',
tag: 'span',
cls: 'dd-handler dd-border-r'
}, {
tag: 'span',
id: 't',
cls: 'dd-handler dd-border-t'
}, {
id: 'b',
tag: 'span',
cls: 'dd-handler dd-border-b'
}]
});
this.adjustInner();
},
onDestroy: function(){
this.closeEl.un('click', this.onDestroy, this);
Ext.getBody().un('mousedown', this.onMousedown, this, {
delegate: '.dd-handler'
});
Ext.getBody().un('mouseup', this.onMouseup, this);
Ext.getBody().un('click', this.onMouseup, this);
this.el.removeAllListeners();
this.mask.hide();
this.frame.hide();
this.el.remove();
}
});
- 大小: 483.2 KB
分享到:
相关推荐
Vue 用于可调整大小和可拖动元素的组件并支持冲突检测与吸附对齐
一个简单的图片浏览小程序可以包括以下功能: 图片展示功能:该功能用于展示图片,可以包括以下功能: 显示图片列表:用户可以在主界面上看到所有图片的缩略图,并可以选择点击查看原图。 图片预览:当用户点击...
一个java swing 实现的拖拽组件 交换位置的小程序
基于 vue2.0 ,可自由拖拽、自由调整大小、收缩展开的 panel 组件
imageQ图片缩放拖拽jQuery小插件 综合网上的一些代码及资源而成
一个图片浏览框架,类似微信图片浏览,手势向下滑动关闭,支持长按和单击监听,支持图片加载引擎自定义,支持横竖屏方向设置,简单方便。
jquery图片拖拽实例(支持鼠标双击事件拖拽图片)
一个小程序用的双指缩放组件,相关文章地址见博客《微信小程序使用自定义组件实现图片双指缩放效果》。(现在资源怎么不可以设置为不要积分了0.)
很简单的图片浏览,很基础的事件控制。 支持鼠标滚轮缩放; 支持鼠标拖动; 鼠标拖动范围限制; 定时触发工具条; …… 编写工具:VS2005
可以自由拖动裁剪框和手动调整裁剪尺寸,实时显示裁剪尺寸大小,准确完成图片裁剪功能,并且能够恢复原始图片,不会丢失原图。 提供完整源码,能够直接在小程序里正常运行,纯前端代码(canvas画布裁剪),非常简洁...
一个 vscode 插件, 秒变和 typora 一样的 markdown 编辑器,支持表格可视化编辑,拖拽图片,各种图标等。在 vsc 编辑器和 Web 视图之间自动同步更改。复制降价/html。上传/粘贴/拖放图像将自动保存到文件夹assets。...
PhotoSwipe是一个图片放大插件,兼容pc和移动端。 1、可控制多种风格如: 标题、分享、全屏按钮,点击事件、是否加入字幕,背景透明等。 2、可支持移动端触摸手势兼容pc端 所有的基本手势支持:滑动下一个或上一个,...
jquery图片拖拽实例(支持鼠标双击事件拖拽图片)效果代码
jQuery支持拖拽图片上传的图片批量上传插件
使用附加属性将各种控件拖动改变大小功能整合到一起,提高复用性和移植性,界面和逻辑分离,支持自定义拖动样式。原文链接:https://blog.csdn.net/u013113678/article/details/121719278
jQuery插件 拖拽和鼠标滚轮控制图片大小
基于jQuery的图片列表拖动排序插件(支持多选),支持选择多张图片拖动排序,支持动态添加和批量删除,支持查看图片。
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽、div拖拽等
小程序图片拖动,wxs语法实现,所以必须保证小程序版本库最低为2.15.0,支持任意列数拖拽