javascript 菜菜鸟求教: javascript 拖动改变单元格大小 楼主说的是控件那样可以随意拉伸?感觉web实现起来比较困难,关注一下~~~ 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 lz属于会滥用js的那种类型~而且掌控不好~~浪费时间浪费力气~~ 这个是原先写的鼠标效果。。如果要修改成LZ想要的效果只需要修改下即可麻烦LZ自己改下好了。。偶要做东西的说。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>鼠标特效</title><script type="text/javascript">var Class = {//创建类 create : function () { return function () { this.initialize.apply(this, arguments); }; }};var $A = function (a) {//转换数组 return a ? Array.apply(null, a) : new Array;};Object.extend = function (a, b) {//追加方法 for (var i in b) a[i] = b[i]; return a;};Object.extend(Object, { addEvent : function (a, b, c, d) { //添加函数 if (a.attachEvent) a.attachEvent(b[0], c); else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false); return c; }, delEvent : function (a, b, c, d) { if (a.detachEvent) a.detachEvent(b[0], c); else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false); return c; }, reEvent : function () { //获取Event return window.event ? window.event : (function (o) { do { o = o.caller; } while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0])); return o.arguments[0]; })(this.reEvent); } });Function.prototype.bind = function () {//绑定事件 var wc = this, a = $A(arguments), o = a.shift(); return function () { wc.apply(o, a.concat($A(arguments))); };};var CMouse = Class.create();CMouse.prototype = { initialize : function (obj) { //初始化参数 var wc = this; wc.div = wc.init_div(); wc.click = null; //鼠标按下后记录其坐标 wc.sFunc = Object.addEvent(document, ["onmousedown"], wc.sMove.bind(wc)); wc.iFunc = wc.eFunc = wc.dFunc = null; }, init_div : function () { //创建DIV,修改样式,并返回 var div = document.createElement("div"); with (div.style) { position = "absolute"; zIndex = 100; overflow = "hidden"; display = "none"; width = height = top = left = "0px"; border = "#CCCCCC 1px solid"; backgroundColor = "#F4F4F4"; filter = "alpha(opcaity=50)"; opacity = "0.5"; } div.innerHTML = " "; return document.body.appendChild(div); }, reMouse : function () { //获取鼠标位置 var e = Object.reEvent(); return { x : document.documentElement.scrollLeft + e.clientX, y : document.documentElement.scrollTop + e.clientY }; }, eDiv : function (pos) { //处理DIV var wc = this, div = wc.div; with(div.style) { left = pos.left + "px"; top = pos.top + "px"; width = pos.width + "px"; height = pos.height + "px"; } }, sMove : function () { //鼠标按下后 var wc = this; wc.click = wc.reMouse(); if (wc.iFunc) return true; with (wc.div.style) { display = "block"; width = height = "0px"; } wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc)); wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc)); wc.dFunc = document.onselectstart; document.onselectstart = new Function("return false"); }, iMove : function () { //鼠标移动时 var wc = this, oms = wc.click, mos = wc.reMouse() wc.eDiv({ left : Math.min(mos.x, oms.x), top : Math.min(mos.y, oms.y), width : Math.abs(mos.x - oms.x), height : Math.abs(mos.y - oms.y) }); }, eMove : function () { //鼠标松开后 var wc = this; wc.div.style.display = "none"; Object.delEvent(document, ["onmousemove"], wc.iFunc); Object.delEvent(document, ["onmouseup"], wc.eFunc); wc.click = wc.iFunc = wc.eFunc = null; document.onselectstart = wc.dFunc; } };var win_load = Object.addEvent(window, ["onload"], function () { var mouse = new CMouse, div = document.createElement("div"); div.innerHTML = new Array(101).join("<br \/>"); document.body.appendChild(div);});</script></head><body></body></html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JK:支持民族工业,尽量少买X货</title><style>.resizeDivClass{position:relative;background-color:red;width:1;overflow:hidden;z-index:100;float:right;left:1;cursor:e-resize;}</style><script language=javascript>var currentResizeDivObj=null;function MouseDownToResize(event,obj){ currentResizeDivObj=obj; obj.mouseDownX=event.clientX; obj.pareneTdW=obj.parentNode.offsetWidth; obj.pareneTableW=obj.parentNode.offsetParent.offsetWidth; if(obj.setCapture) obj.setCapture(); else event.preventDefault();}function MouseMoveToResize(event){ if(!currentResizeDivObj) return ; var obj=currentResizeDivObj; event=event||window.event; if(!obj.mouseDownX) return false; var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; if(newWidth>0) { obj.parentNode.style.width = newWidth; obj.parentNode.offsetParent.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX; }}function MouseUpToResize(){ if(!currentResizeDivObj) return; if (currentResizeDivObj.releaseCapture) currentResizeDivObj.releaseCapture(); currentResizeDivObj=null;}</script></head><body onmousemove="MouseMoveToResize(event);" onmouseup="MouseUpToResize();" ><div style="font-size:10pt;">注1:改变Table的列宽<br/> <br/>注:本页面仅在IE6/Firefox1.5下测试过。其它浏览器或其它版本未经测试。<br/> 注-----:JK:<a href="mailTo:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/> <hr/></div><table border=1 style="table-layout:fixed;" ><tr bgcolor=cccccc ><td valign=top > <div class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" > </div> aaa</td><td valign=top > <div class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" > </div> bbb</td><td valign=top > <div class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" > </div> ccc</td></tr><tr><td>aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a</td><td>bbbb</td><td>dddd</td></tr></table></body></html> 另一种风格的:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JK:支持民族工业,尽量少买X货</title><script language="javascript">var ResizeTable_CurrentTdObj=null;function ResizeTable_MouseDown(event,obj){ obj=obj||this; event=event||window.event; ResizeTable_CurrentTdObj=obj; obj.mouseDownX=event.clientX; obj.mouseDownY=event.clientY; obj.tdW=obj.offsetWidth; obj.tdH=obj.offsetHeight; if(obj.setCapture) obj.setCapture(); else event.preventDefault();}function ResizeTable_MouseMove(event){ if(!ResizeTable_CurrentTdObj) return ; var obj=ResizeTable_CurrentTdObj; event=event||window.event; if(!obj.mouseDownX) return false; if(obj.parentNode.rowIndex==0) { var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX; if(newWidth>0) obj.style.width = newWidth; else obj.style.width =1; } if(obj.cellIndex==0){ var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY; if(newHeight>0) obj.style.height = newHeight; else obj.style.height =1; }}function ResizeTable_MouseUp(){ if(!ResizeTable_CurrentTdObj) return; if (ResizeTable_CurrentTdObj.releaseCapture) ResizeTable_CurrentTdObj.releaseCapture(); ResizeTable_CurrentTdObj=null;}function ResizeTable_Init(table,needChangeWidth,needChangeHeight){ if(!needChangeWidth && !needChangeHeight) return; var oTh=table.rows[0]; if(needChangeWidth){ for(var i=0;i<oTh.cells.length;i++) { var cell=oTh.cells[i]; cell.style.cursor="e-resize"; cell.style.width=cell.offsetWidth; cell.onmousedown =ResizeTable_MouseDown; } } if(needChangeHeight){ for(var j=0;j<table.rows.length;j++) { var cell=table.rows[j].cells[0]; cell.style.cursor="s-resize"; cell.onmousedown =ResizeTable_MouseDown; } } if(needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor="se-resize"; table.style.width=null; table.style.tableLayout="fixed";}</script></head><body onmousemove="ResizeTable_MouseMove(event);" onmouseup="ResizeTable_MouseUp();" ><div style="font-size:10pt;">注1:改变Table的列宽<br/> 注2:部分代码来自csdn网友bluedoctor:http://community.csdn.net/Expert/topic/5282/5282361.xml<br/> <br/> 注:本页面仅在IE6/Firefox1.5下测试过(效果不一致)。其它浏览器或其它版本未经测试。<br/> 注-----:JK:<a href="mailTo:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/> <hr/> </div><table border="1" id="table1" style="width:100%;background-color:#eeeeee;" > <tr > <td >&nbps;</td> <td >header1</td> <td >header2</td> <td >header3</td> <td >hello hello hello</td> </tr> <tr> <td >1</td> <td >1</td> <td >thank you thank you </td> <td >男儿气壮</td> <td ><select><option>hello Hello</option></select></td> </tr> <tr> <td >2</td> <td >2</td> <td >you are welcome </td> <td >胸中吐万丈长虹</td> <td ><input type="text" name="T4" size="20" value="Hello Hello"></td> </tr></table><script language ="javascript">ResizeTable_Init(document.getElementById("table1"),true,true);</script></body></html> JS如何倒序获取控件的值 菜鸟在此急问!!怎么样做出点击一张图片播放声音啊,急!! 一个IE下的BUG,高手来看 请教关于anchor.click()的问题 js能不能实现这样的功能??? 关于日期的,具体请看内容 想实现一个功能 当选择表单select0里边的“产品分类“,然后自动探出另外一个select1表单,选择select1表单里边的分类信息搜索,选择表单 新手问题,什么是IFRAME,与FRAME有什么区别? 为什么在jsp中无法使用正则表达式呢? 绘制pie饼图 求:如何使用JavaScript按行读取TextArea的文本 javascript中如何实现两个文本框内容的合并
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标特效</title>
<script type="text/javascript">
var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};Object.extend(Object, { addEvent : function (a, b, c, d) {
//添加函数
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
reEvent : function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};var CMouse = Class.create();CMouse.prototype = {
initialize : function (obj) {
//初始化参数
var wc = this;
wc.div = wc.init_div();
wc.click = null; //鼠标按下后记录其坐标
wc.sFunc = Object.addEvent(document, ["onmousedown"], wc.sMove.bind(wc));
wc.iFunc = wc.eFunc = wc.dFunc = null;
},
init_div : function () {
//创建DIV,修改样式,并返回
var div = document.createElement("div");
with (div.style) {
position = "absolute";
zIndex = 100;
overflow = "hidden";
display = "none";
width = height = top = left = "0px";
border = "#CCCCCC 1px solid";
backgroundColor = "#F4F4F4";
filter = "alpha(opcaity=50)";
opacity = "0.5";
}
div.innerHTML = " ";
return document.body.appendChild(div);
},
reMouse : function () {
//获取鼠标位置
var e = Object.reEvent();
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
eDiv : function (pos) {
//处理DIV
var wc = this, div = wc.div;
with(div.style) {
left = pos.left + "px";
top = pos.top + "px";
width = pos.width + "px";
height = pos.height + "px";
}
},
sMove : function () {
//鼠标按下后
var wc = this;
wc.click = wc.reMouse();
if (wc.iFunc) return true;
with (wc.div.style) {
display = "block";
width = height = "0px";
}
wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc));
wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc));
wc.dFunc = document.onselectstart;
document.onselectstart = new Function("return false");
},
iMove : function () {
//鼠标移动时
var wc = this, oms = wc.click, mos = wc.reMouse()
wc.eDiv({
left : Math.min(mos.x, oms.x), top : Math.min(mos.y, oms.y),
width : Math.abs(mos.x - oms.x), height : Math.abs(mos.y - oms.y)
});
},
eMove : function () {
//鼠标松开后
var wc = this; wc.div.style.display = "none";
Object.delEvent(document, ["onmousemove"], wc.iFunc);
Object.delEvent(document, ["onmouseup"], wc.eFunc);
wc.click = wc.iFunc = wc.eFunc = null;
document.onselectstart = wc.dFunc;
}
};var win_load = Object.addEvent(window, ["onload"], function () {
var mouse = new CMouse, div = document.createElement("div");
div.innerHTML = new Array(101).join("<br \/>");
document.body.appendChild(div);
});
</script>
</head>
<body></body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:1;
overflow:hidden;
z-index:100;
float:right;
left:1;
cursor:e-resize;
}
</style><script language=javascript>
var currentResizeDivObj=null;
function MouseDownToResize(event,obj){
currentResizeDivObj=obj;
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentNode.offsetWidth;
obj.pareneTableW=obj.parentNode.offsetParent.offsetWidth;
if(obj.setCapture) obj.setCapture();
else event.preventDefault();
}
function MouseMoveToResize(event){
if(!currentResizeDivObj) return ;
var obj=currentResizeDivObj;
event=event||window.event;
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentNode.style.width = newWidth;
obj.parentNode.offsetParent.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(){
if(!currentResizeDivObj) return;
if (currentResizeDivObj.releaseCapture) currentResizeDivObj.releaseCapture();
currentResizeDivObj=null;
}
</script></head><body onmousemove="MouseMoveToResize(event);" onmouseup="MouseUpToResize();" ><div style="font-size:10pt;">
注1:改变Table的列宽<br/>
<br/>
注:本页面仅在IE6/Firefox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----:JK:<a href="mailTo:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/>
<hr/>
</div><table border=1 style="table-layout:fixed;" >
<tr bgcolor=cccccc >
<td valign=top >
<div class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" > </div>
aaa
</td>
<td valign=top >
<div class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" > </div>
bbb
</td>
<td valign=top >
<div class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" > </div>
ccc
</td>
</tr>
<tr>
<td>aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a</td><td>bbbb</td><td>dddd</td>
</tr>
</table>
</body></html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language="javascript">
var ResizeTable_CurrentTdObj=null;
function ResizeTable_MouseDown(event,obj){
obj=obj||this;
event=event||window.event;
ResizeTable_CurrentTdObj=obj;
obj.mouseDownX=event.clientX;
obj.mouseDownY=event.clientY;
obj.tdW=obj.offsetWidth;
obj.tdH=obj.offsetHeight;
if(obj.setCapture) obj.setCapture();
else event.preventDefault();
}
function ResizeTable_MouseMove(event){
if(!ResizeTable_CurrentTdObj) return ;
var obj=ResizeTable_CurrentTdObj;
event=event||window.event;
if(!obj.mouseDownX) return false;
if(obj.parentNode.rowIndex==0) {
var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0) obj.style.width = newWidth;
else obj.style.width =1;
}
if(obj.cellIndex==0){
var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;
if(newHeight>0) obj.style.height = newHeight;
else obj.style.height =1;
}
}
function ResizeTable_MouseUp(){
if(!ResizeTable_CurrentTdObj) return;
if (ResizeTable_CurrentTdObj.releaseCapture) ResizeTable_CurrentTdObj.releaseCapture();
ResizeTable_CurrentTdObj=null;
}
function ResizeTable_Init(table,needChangeWidth,needChangeHeight)
{
if(!needChangeWidth && !needChangeHeight) return;
var oTh=table.rows[0];
if(needChangeWidth){
for(var i=0;i<oTh.cells.length;i++) {
var cell=oTh.cells[i];
cell.style.cursor="e-resize";
cell.style.width=cell.offsetWidth;
cell.onmousedown =ResizeTable_MouseDown;
}
}
if(needChangeHeight){
for(var j=0;j<table.rows.length;j++) {
var cell=table.rows[j].cells[0];
cell.style.cursor="s-resize";
cell.onmousedown =ResizeTable_MouseDown;
}
}
if(needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor="se-resize";
table.style.width=null;
table.style.tableLayout="fixed";
}</script></head><body onmousemove="ResizeTable_MouseMove(event);" onmouseup="ResizeTable_MouseUp();" >
<div style="font-size:10pt;">
注1:改变Table的列宽<br/>
注2:部分代码来自csdn网友bluedoctor:http://community.csdn.net/Expert/topic/5282/5282361.xml<br/>
<br/>
注:本页面仅在IE6/Firefox1.5下测试过(效果不一致)。其它浏览器或其它版本未经测试。<br/>
注-----:JK:<a href="mailTo:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/>
<hr/>
</div>
<table border="1" id="table1" style="width:100%;background-color:#eeeeee;" >
<tr >
<td >&nbps;</td>
<td >header1</td>
<td >header2</td>
<td >header3</td>
<td >hello hello hello</td>
</tr>
<tr>
<td >1</td>
<td >1</td>
<td >thank you thank you </td>
<td >男儿气壮</td>
<td ><select><option>hello Hello</option></select></td>
</tr>
<tr>
<td >2</td>
<td >2</td>
<td >you are welcome </td>
<td >胸中吐万丈长虹</td>
<td ><input type="text" name="T4" size="20" value="Hello Hello"></td>
</tr>
</table>
<script language ="javascript">
ResizeTable_Init(document.getElementById("table1"),true,true);
</script>
</body></html>