复制代码代码如下:
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ปรับขนาด</title>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
ตำแหน่ง:สัมบูรณ์;พื้นหลัง:#C00;ความกว้าง:6px;ความสูง:6px;z-index:5;ขนาดตัวอักษร:0;}
#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{เคอร์เซอร์:nw-resize;}
#rRight,#rLeft{เคอร์เซอร์:e-resize;}
#rUp,#rDown{เคอร์เซอร์:n-resize;}
#rRightDown{ ด้านล่าง:-3px; ขวา:-3px;}
#rLeftDown{ ด้านล่าง:-3px; ซ้าย:-3px;}
#rRightUp{ ด้านบน:-3px; ขวา:-3px;}
#rLeftUp{ บน:-3px; ซ้าย:-3px;}
#rRight{ ขวา:-3px; ด้านบน:50%}
#rLeft{ ซ้าย:-3px; ด้านบน:50%}
#rUp{ ด้านบน:-3px; ซ้าย:50%}
#rDown{ ด้านล่าง:-3px; ซ้าย:50%}
</สไตล์>
</หัว>
<ร่างกาย>
<div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;" -
<div id="rRightDown"> </div>
<div id="rLeftDown"> </div>
<div id="rRightUp"> </div>
<div id="rLeftUp"> </div>
<div id="rRight"> </div>
<div id="rLeft"> </div>
<div id="rUp"> </div>
<div id="rDown"></div>
</div>
<สคริปต์>
var Sys = (ฟังก์ชั่น (ua) {
วาร์ ส = {};
s.IE = ua.match(/msie ([/d.]+)/)?true:false;
s.Firefox = ua.match(/firefox//([/d.]+)/)?true:false;
s.Chrome = ua.match(/chrome//([/d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
กลับ;
})(navigator.userAgent.toLowerCase());
var $ = ฟังก์ชั่น (id) {
ส่งคืน document.getElementById(id);
-
var Css = ฟังก์ชั่น (e, o) {
สำหรับ(var i in o)
e.style[i] = o[i];
-
var Extended = function (ปลายทาง, แหล่งที่มา) {
สำหรับ (คุณสมบัติ var ในแหล่งที่มา) {
ปลายทาง [คุณสมบัติ] = แหล่งที่มา [คุณสมบัติ];
-
-
var Bind = ฟังก์ชั่น (วัตถุ, สนุก) {
var args = Array.prototype.slice.call(อาร์กิวเมนต์).slice(2);
ฟังก์ชันส่งคืน () {
กลับ fun.apply (วัตถุ args);
-
-
var BindAsEventListener = ฟังก์ชั่น (วัตถุ, สนุก) {
var args = Array.prototype.slice.call(อาร์กิวเมนต์).slice(2);
ฟังก์ชั่นส่งคืน (เหตุการณ์) {
return fun.apply (วัตถุ [เหตุการณ์ || window.event].concat (args));
-
-
var CurrentStyle = ฟังก์ชั่น (องค์ประกอบ) {
กลับองค์ประกอบ currentStyle || document.defaultView.getComputedStyle (องค์ประกอบ, null);
-
ฟังก์ชั่น addListener (องค์ประกอบ, e, fn) {
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
-
ฟังก์ชั่น RemoveListener (องค์ประกอบ, e, fn) {
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)
-
var Class = ฟังก์ชั่น (คุณสมบัติ) {
var _class = function(){return (อาร์กิวเมนต์ [0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply (สิ่งนี้ ข้อโต้แย้ง) : this;};
_class.prototype = คุณสมบัติ;
กลับ _คลาส;
-
var ปรับขนาด = คลาสใหม่ ({
เริ่มต้น : function(obj){
นี้.obj = obj;
นี้.resizeelm = null;
this.fun = โมฆะ; //记录触发什么事件的索引
นี้.ต้นฉบับ = []; //记录เปิด始状态的数组
นี้.ความกว้าง = null;
this.height = โมฆะ;
this.fR = BindAsEventListener (นี่, this.resize);
this.fS = ผูก (นี้, this.stop);
-
set : function(elm,ทิศทาง){
ถ้า(!เอล์ม)กลับมา;
this.resizeelm = เอล์ม;
addListener(this.resizeelm,'mousedown',BindAsEventListener(นี่, this.start, นี้[ทิศทาง]));
คืนสิ่งนี้;
-
เริ่มต้น : function(e,fun){
นี่สนุก = สนุก;
this.Original = [parseInt(CurrentStyle(this.obj).width),parseInt(CurrentStyle(this.obj).height),parseInt(CurrentStyle(this.obj).left),parseInt(CurrentStyle(this.obj) สูงสุด)];
this.width = (this.Original[2]||0) + this.Original[0];
this.height = (this.Original[3]||0) + this.Original[1];
addListener(เอกสาร,"เมาส์มูฟ",this.fR);
addListener(เอกสาร,'mouseup',this.fS);
-
ปรับขนาด : function(e){
นี้.สนุก(e);
Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this.fS()})
-
หยุด : function(){
RemoveListener(เอกสาร "mousemove", this.fR);
RemoveListener(เอกสาร "mousemove", this.fS);
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
-
ขึ้น : ฟังก์ชั่น(e){
this.height>e.clientY?Css(this.obj,{top:e.clientY + "px",height:this.height-e.clientY + "px"}):this.turnDown(e);
-
ลง : ฟังก์ชั่น(e){
e.clientY>this.Original[3]?Css(this.obj,{top:this.Original[3]+'px',height:e.clientY-this.Original[3]+'px'}): this.turnUp(e);
-
ซ้าย : ฟังก์ชั่น(e){
e.clientX<this.width?Css(this.obj,{left:e.clientX +'px',width:this.width-e.clientX + "px"}):this.turnRight(e);
-
ขวา : ฟังก์ชั่น(e){
e.clientX>this.Original[2]?Css(this.obj,{left:this.Original[2]+'px',width:e.clientX-this.Original[2]+"px"}): นี้.turnLeft(e) ;
-
ซ้ายขึ้น: ฟังก์ชั่น (e) {
this.up(e);this.left(e);
-
ซ้ายลง: ฟังก์ชั่น (e) {
this.left(e);this.down(e);
-
rightUp:ฟังก์ชั่น(e){
this.up(e);this.right(e);
-
ขวาลง: ฟังก์ชั่น (e) {
นี้.ขวา(e);this.down(e);
-
เทิร์นดาวน์ : ฟังก์ชั่น(e){
Css(this.obj,{top:this.height+'px',height:e.clientY - this.height + 'px'});
-
การพลิกกลับ : ฟังก์ชั่น (e) {
Css(this.obj,{top : e.clientY +'px',height : this.Original[3] - e.clientY +'px'});
-
TurnRight : ฟังก์ชั่น(e){
Css(this.obj,{left:this.width+'px',width:e.clientX- this.width +'px'});
-
เลี้ยวซ้าย : ฟังก์ชั่น (e) {
Css(this.obj,{ซ้าย:e.clientX +'px',ความกว้าง:this.Original[2]-e.clientX+'px'});
-
-
window.onload = ฟังก์ชั่น () {
ใหม่ ปรับขนาด($('ss')).set($('rUp'),'up').set($('rDown'),'down').set($('rLeft'),'left' ).set($('rRight'),'right').set($(' rLeftUp'),'leftUp').set($('rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp') ;
-
</สคริปต์>
</ร่างกาย>
</html>