沙漠旅行者
- 浏览: 19275 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
<html>
<head>
<meta http-equiv="Content-Type" content="application/msword; charset=GBK" />
<title>跨行移动</title>
<link rel="stylesheet" href=/pif/css/default.css type="text/css">
<head></head>
<script>
function test(obj)
{
alert(obj.offsetWidth);
return;
//var lft=obj.offsetTop;
var valueT = 0, valueL = 0;
do {
valueT += (obj.offsetTop || 0)-obj.scrollTop;
valueL += (obj.offsetLeft || 0)-obj.scrollLeft;
obj = obj.offsetParent;
} while (obj);
alert(valueT);
}
//隐藏时，TD背景颜色
var colorY="yellow";
//隐藏产品属性设置方法
function hideAttribute(obj)
{
var colorN="";
//√X
if(obj.value=="X")
{//表示需要隐藏
obj.value="√";
obj.style.background=colorY;
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
obj.style.background=colorY;
//设置点击单元格移到表格最后
//----1---得到表格最后一行
var tableObj=obj.parentNode.parentNode;
var endTR=tableObj.childNodes[tableObj.childNodes.length-1];
endTR.appendChild(obj);
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
}else{
//表示需要还原
obj.value="X";
var color="";
obj.style.background=colorN;
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
obj.style.background=colorN;
//得到第一个被隐藏的TD对象
var objPNTable=obj.parentNode.parentNode;
for(pntb=0;pntb<objPNTable.childNodes.length;pntb++){
var objPN=objPNTable.childNodes[pntb];//TR
var stopFlag=false;
for(pn=0;pn<objPN.childNodes.length;pn++){//TD
if(objPN.childNodes[pn].style.background==colorY){
objPN.insertBefore(obj,objPN.childNodes[pn]);
stopFlag=true;
break;
}
}
if(stopFlag==true){
break;
}
}
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
}
alert("bbb");
return false;
}
</script>
<body bgcolor="#EBEEF7">
<div style="height:800px;border:1px solid red;cursor:move;" width="100%" onclick="test(this)">
1233
</div>
<div style="">
<table border="1" width="88xpx" height="60px" cellspacing="0" cellpadding="0" name="PPC" id="PPC" class="table_">
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onclick="test(this)">
11111<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
22222<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
33333<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
11111bbbb<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
22222bbbb<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
33333bbbb
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
XXXXXXXXXXXXXXXXX●★■▲※
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">XXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
!!!!!!!!!!!!!!!!
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
@@@@@@@@@@@@@@@
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
###############
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
YYYYYYYYYYYYYYY
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">YYYYYYYYYYYYYYYYYYYYYY</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
$$$$$$$$$$$$
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
%%%%%%%%%%%%
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
^^^^^^^^^^^^^^^^^^
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
XXXXXXXXXXXXXXXXX
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">XXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
!!!!!!!!!!!!!!!!
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
@@@@@@@@@@@@@@@
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
###############
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
YYYYYYYYYYYYYYY
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">YYYYYYYYYYYYYYYYYYYYYY</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
$$$$$$$$$$$$
</div>
</td>
<td width="220px" class="td_3" align="center">
</td>
<td width="220px" class="td_3" align="center">
</td>
</tr>
</table>
</div>
<input type="text" id="xxx" value="aaa" style="width:0px"/>
<div id='pop-editor' style='width: 220px;height:30px;border:1px solid red;cursor:move;background:#EBEEF7;position: absolute;display:none;z-index:3001;'
onmousedown='down(event,this)' onmouseup='up(this)'>
44444aaa
</div>
<script>
var posX;
var posY;
var popDiv;
var dragable;
var objClick;
function getX(elem){
var xx=0;
while(elem){
//x=x+elem.offsetLeft;
xx=xx+elem.scrollLeft;
elem=elem.offsetParent;
}
return xx;
}
function getY(elem){
var yy=0;
while(elem){
//y=y+elem.offsetTop;
yy=yy+elem.scrollTop
elem=elem.offsetParent;
}
return yy;
}
var valueT = 0, valueL = 0;
function down(e,obj){
var objXX=obj;
var objYY=obj;
valueT=getY(objYY);
valueL=getX(objXX);
//alert(obj.id);
//alert(obj.innerHTML);
//popDiv=obj;
if(obj==null)return;
//保存点击的TD对象
var i=0;
while(i<10){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
//如果点击的是隐藏的，直接返回
if(obj.style.background!=colorY){
if(document.getElementById("pop-editor").style.display=="block")
{
up(obj);
return;
}
popDiv = document.getElementById("pop-editor");
popDiv.innerHTML=obj.innerHTML+'<iframe src="" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%;z-index:-1; filter='+'"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"'+';"> </iframe> ';
objClick=obj;
popDiv.style.left=e.clientX +valueL;
popDiv.style.top=e.clientY +valueT;
document.getElementById("pop-editor").style.display="block";
e = e || window.event; //如果是IE
posX = e.clientX - parseInt(popDiv.style.left);
posY = e.clientY - parseInt(popDiv.style.top);
//alert("posX="+posX+" posY="+posY);
dragable = true;
//alert("posX="+posX+" posY="+posY);
document.onmousemove = move;
// el = window.event.srcElement;
//el=e.srcElement;
//el.setCapture();
}
}
function move(ev){
if(dragable == true && objClick!=null){
ev = ev || window.event;//如果是IE
//取消事件冒泡
//window.event.cancelBubble = false;
popDiv.style.left = (ev.clientX - posX)+ "px";
popDiv.style.top = (ev.clientY - posY) + "px";
//popDiv.style.left = (ev.clientX - posX) + "px";
//popDiv.style.top = (ev.clientY - posY) + "px";
}
}
function up(obj){
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
//如果点击的是隐藏的，直接返回
if(obj.style.background!=colorY){
if(obj==null || obj.tagName!="TD"){
alert("放开鼠标的位置不是TD内。"+(obj==null?"null":obj.tagName));
return;
}
if(objClick==null){
alert("没有选中需要移动的内容。");
return;
}
//name="textareaTD" 判断移动的是否是大输入框，规则：大输入框只能和大输入框相互移动
//-----1----判断点击对象是不是大输入框
var objClickTTAFlag=true;
if(objClick.name!=null && objClick.name!="" && objClick.name=="textareaTD"){
//-----2----判断放开对象是不是大输入框
if(obj.name==null || obj.name=="" || obj.name!="textareaTD"){
//alert("大输入框只能和大输入框相互移动。");
//return;
}
objClickTTAFlag=false;
}
//-----2----判断放开对象是不是大输入框
if(obj.name!=null && obj.name!="" && obj.name=="textareaTD" && objClickTTAFlag==true){
//alert("非大输入框不能和大输入框相互移动。");
//return;
}
dragable = false;
document.getElementById("pop-editor").style.display="none";
//alert("up:"+obj.id);
//alert("up:"+obj.innerHTML);
//objInnerHTML=obj.innerHTML;//鼠标松开时，赋值接收单元格内容
//移动单元格
moveTD(obj);
//objClick.innerHTML=obj.innerHTML;
//obj.innerHTML=document.getElementById("pop-editor").innerHTML;
objClick=null;
//el = window.event.srcElement;
//el.setCapture();
//document.getElementById("xxx").focus();
}
}
//把鼠标放开时该单元格之后的每个单元格往后移动一个位置
function moveTD(obj)
{
//获取放开选择单元格的行对象
var trObj;
var upTD=obj;
var numberWhile=0;//控制只允许循环不超过10次，避免死循环
while(numberWhile<10){
if(upTD.parentNode!=null && upTD.parentNode.tagName=="TR"){
trObj=upTD.parentNode;
break;
}else{
upTD=upTD.parentNode;
}
numberWhile++;
}
//获取点击选择单元格的行对象
var trObjOld;
var upTDOld=objClick;
var numberWhileOld=0;//控制只允许循环不超过10次，避免死循环
while(numberWhileOld<10){
if(upTDOld.parentNode!=null && upTDOld.parentNode.tagName=="TR"){
trObjOld=upTDOld.parentNode;
break;
}else{
upTDOld=upTDOld.parentNode;
}
numberWhileOld++;
}
//判断点击和放开两者TD是否在同一个TABLE里面
if(trObj.parentNode!=trObjOld.parentNode){
//表示不再同一个表格中
alert("移动错误。");
return;
}
//-******************开始判断怎么移动***************************************
//判断是否是同一行之间的移动
var trObjTDNumber=0,trObjOldNumber=0;
if(trObj.rowIndex==trObjOld.rowIndex){//表示是同一行之间的移动
for(t=0;t<trObjOld.childNodes.length;t++){
if(trObjOld.childNodes[t]==obj){
//表示该对象是鼠标放开时的TD
trObjTDNumber=t;
}
if(trObjOld.childNodes[t]==objClick){
//表示该对象是鼠标放开时的TD
trObjOldNumber=t;
}
}
}
if(trObj.rowIndex>trObjOld.rowIndex || (trObj.rowIndex==trObjOld.rowIndex && trObjTDNumber>trObjOldNumber)){
//表示放开鼠标所在行（2行）大于鼠标点击的行（0行）
//***点击之后的所有单元格往前移动一个单元格，直至放开位置停止
//---------点击之后的所有单元格往前移动一个单元格，直至放开位置停止--------start------------
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
insertAfter(objClick,obj);
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
//---------点击之后的所有单元格往前移动一个单元格，直至放开位置停止--------end------------
}
else if(trObj.rowIndex<trObjOld.rowIndex || (trObj.rowIndex==trObjOld.rowIndex && trObjTDNumber<trObjOldNumber)){
//表示放开鼠标所在行（0行）大于鼠标点击的行（2行）
//***放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止
//---------放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止--------start------------
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
obj.parentNode.insertBefore(objClick,obj);
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
//---------放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止--------end------------
}
}
//设置跨行单元格内容移到表格指定位置
function setSpanRowIsTDToAppoint(objOldAppointPanrentNode)
{
/* //获得TD对象， 保存点击的TD对象内容
var i=0;
while(i<10){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
obj.parentNode.insertBefore(objClick,obj);
*/
while(objOldAppointPanrentNode!=null){
//判断是否需要推移，计算每行多少个单元格
var numTDSun=0;
for(nm=0;nm<objOldAppointPanrentNode.childNodes.length;nm++){
//删除为空的单元格
if(objOldAppointPanrentNode.childNodes[nm].innerHTML=="" || objOldAppointPanrentNode.childNodes[nm].innerHTML.length<11)
{
//执行删除空的单元格
objOldAppointPanrentNode.removeChild(objOldAppointPanrentNode.childNodes[nm]);
nm--;
//nlFlag=true;
//numTDSun--;
continue;
}
if(objOldAppointPanrentNode.childNodes[nm].colSpan==null || objOldAppointPanrentNode.childNodes[nm].colSpan=="")
{
numTDSun++;
}else{
numTDSun+=objOldAppointPanrentNode.childNodes[nm].colSpan;
}
}
//跳过为空的对象
while(objOldAppointPanrentNode.nextSibling!=null && (objOldAppointPanrentNode.nextSibling.innerHTML=="" || objOldAppointPanrentNode.nextSibling.childNodes.length==0)){
objOldAppointPanrentNode.parentNode.removeChild(objOldAppointPanrentNode.nextSibling);
//alert("跳过为空的对象null****!");
}
while(numTDSun>3){//表示需要移动 start
var isEndFlag=false;
if(objOldAppointPanrentNode.nextSibling==null)
{
//没有行，需要创建行
addRow_withInsert(objOldAppointPanrentNode.parentNode,numTDSun);
isEndFlag=true;
//alert("123="+(objOldAppointPanrentNode.nextSibling==null));
//alert(objOldAppointPanrentNode.parentNode.innerHTML);
}
var endObj=objOldAppointPanrentNode.childNodes[objOldAppointPanrentNode.childNodes.length-1];
if(endObj.innerHTML!="")
{
var endObjCLND=endObj.cloneNode(true);
objOldAppointPanrentNode.nextSibling.insertBefore(endObjCLND,objOldAppointPanrentNode.nextSibling.childNodes[0]);
}
if(endObj.colSpan!=null && endObj.colSpan!="" && endObj.colSpan==2){
endObj.innerHTML="";
endObj.colSpan=1;
endObj.width=endObj.offsetWidth/2;
}else{
objOldAppointPanrentNode.removeChild(objOldAppointPanrentNode.childNodes[objOldAppointPanrentNode.childNodes.length-1]);
}
//归零
numTDSun=0;
for(nm=0;nm<objOldAppointPanrentNode.childNodes.length;nm++){
if(objOldAppointPanrentNode.childNodes[nm].colSpan==null || objOldAppointPanrentNode.childNodes[nm].colSpan=="")
{
numTDSun++;
}else{
numTDSun+=objOldAppointPanrentNode.childNodes[nm].colSpan;
}
}//end for
if(isEndFlag==true && numTDSun<=3){//表示已经添加了一行
break;
}
}//表示需要移动 end
if(numTDSun<3 && objOldAppointPanrentNode.nextSibling!=null && objOldAppointPanrentNode.nextSibling.childNodes[0]!=null){//表示需要向上补充移动
var nextObjTD=objOldAppointPanrentNode.nextSibling.childNodes[0];
for(bf=0;bf<objOldAppointPanrentNode.childNodes.length;bf++){
objOldAppointPanrentNode.nextSibling.insertBefore(objOldAppointPanrentNode.childNodes[bf],nextObjTD);
bf--;
}
}
objOldAppointPanrentNode=objOldAppointPanrentNode.nextSibling;
}
//alert(objClick.parentNode.parentNode.innerHTML);
}
//添加行的另一种方法insertRow
function addRow_withInsert(tableObj,numTDSun){
var row=tableObj.insertRow(tableObj.rows.length);
//var countCell=tableObj.rows.item(0).cells.length;
//alert("******="+(6-(numTDSun-3)));
//numTDSun%3==0?(3*(numTDSun/3-1)):
for(var i=0;i<6-(numTDSun-3);i++){
var cell=row.insertCell(i);
cell.innerHTML="<h1>9</h1>";
}
}
//在表格操作位置后面新增一格
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
</script>
</body>
<head>
<meta http-equiv="Content-Type" content="application/msword; charset=GBK" />
<title>跨行移动</title>
<link rel="stylesheet" href=/pif/css/default.css type="text/css">
<head></head>
<script>
function test(obj)
{
alert(obj.offsetWidth);
return;
//var lft=obj.offsetTop;
var valueT = 0, valueL = 0;
do {
valueT += (obj.offsetTop || 0)-obj.scrollTop;
valueL += (obj.offsetLeft || 0)-obj.scrollLeft;
obj = obj.offsetParent;
} while (obj);
alert(valueT);
}
//隐藏时，TD背景颜色
var colorY="yellow";
//隐藏产品属性设置方法
function hideAttribute(obj)
{
var colorN="";
//√X
if(obj.value=="X")
{//表示需要隐藏
obj.value="√";
obj.style.background=colorY;
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
obj.style.background=colorY;
//设置点击单元格移到表格最后
//----1---得到表格最后一行
var tableObj=obj.parentNode.parentNode;
var endTR=tableObj.childNodes[tableObj.childNodes.length-1];
endTR.appendChild(obj);
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
}else{
//表示需要还原
obj.value="X";
var color="";
obj.style.background=colorN;
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
obj.style.background=colorN;
//得到第一个被隐藏的TD对象
var objPNTable=obj.parentNode.parentNode;
for(pntb=0;pntb<objPNTable.childNodes.length;pntb++){
var objPN=objPNTable.childNodes[pntb];//TR
var stopFlag=false;
for(pn=0;pn<objPN.childNodes.length;pn++){//TD
if(objPN.childNodes[pn].style.background==colorY){
objPN.insertBefore(obj,objPN.childNodes[pn]);
stopFlag=true;
break;
}
}
if(stopFlag==true){
break;
}
}
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
}
alert("bbb");
return false;
}
</script>
<body bgcolor="#EBEEF7">
<div style="height:800px;border:1px solid red;cursor:move;" width="100%" onclick="test(this)">
1233
</div>
<div style="">
<table border="1" width="88xpx" height="60px" cellspacing="0" cellpadding="0" name="PPC" id="PPC" class="table_">
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onclick="test(this)">
11111<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
22222<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
33333<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
11111bbbb<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
22222bbbb<input type="button" name="Submit3" value="X" class="button23" onClick="hideAttribute(this)">
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
33333bbbb
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
XXXXXXXXXXXXXXXXX●★■▲※
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">XXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
!!!!!!!!!!!!!!!!
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
@@@@@@@@@@@@@@@
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
###############
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
YYYYYYYYYYYYYYY
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">YYYYYYYYYYYYYYYYYYYYYY</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
$$$$$$$$$$$$
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
%%%%%%%%%%%%
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
^^^^^^^^^^^^^^^^^^
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
XXXXXXXXXXXXXXXXX
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">XXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
!!!!!!!!!!!!!!!!
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
@@@@@@@@@@@@@@@
</div>
</td>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
###############
</div>
</td>
</tr>
<tr>
<td width="220px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
YYYYYYYYYYYYYYY
</div>
</td>
<td width="220px" class="td_3" align="center" colspan="2" name="textareaTD">
<div id='pop-editorDIV' style='width: 440px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
<textarea readonly rows="4" style="width:440">YYYYYYYYYYYYYYYYYYYYYY</textarea>
</div>
</td>
</tr>
<tr>
<td width="220px" height="30px" class="td_3" align="center">
<div id='pop-editorDIV' style='width: 220px;height:30px;border:1px solid red;cursor:move;'
onmousedown='down(event,this)' onmouseup='up(this)'>
$$$$$$$$$$$$
</div>
</td>
<td width="220px" class="td_3" align="center">
</td>
<td width="220px" class="td_3" align="center">
</td>
</tr>
</table>
</div>
<input type="text" id="xxx" value="aaa" style="width:0px"/>
<div id='pop-editor' style='width: 220px;height:30px;border:1px solid red;cursor:move;background:#EBEEF7;position: absolute;display:none;z-index:3001;'
onmousedown='down(event,this)' onmouseup='up(this)'>
44444aaa
</div>
<script>
var posX;
var posY;
var popDiv;
var dragable;
var objClick;
function getX(elem){
var xx=0;
while(elem){
//x=x+elem.offsetLeft;
xx=xx+elem.scrollLeft;
elem=elem.offsetParent;
}
return xx;
}
function getY(elem){
var yy=0;
while(elem){
//y=y+elem.offsetTop;
yy=yy+elem.scrollTop
elem=elem.offsetParent;
}
return yy;
}
var valueT = 0, valueL = 0;
function down(e,obj){
var objXX=obj;
var objYY=obj;
valueT=getY(objYY);
valueL=getX(objXX);
//alert(obj.id);
//alert(obj.innerHTML);
//popDiv=obj;
if(obj==null)return;
//保存点击的TD对象
var i=0;
while(i<10){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
//如果点击的是隐藏的，直接返回
if(obj.style.background!=colorY){
if(document.getElementById("pop-editor").style.display=="block")
{
up(obj);
return;
}
popDiv = document.getElementById("pop-editor");
popDiv.innerHTML=obj.innerHTML+'<iframe src="" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%;z-index:-1; filter='+'"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"'+';"> </iframe> ';
objClick=obj;
popDiv.style.left=e.clientX +valueL;
popDiv.style.top=e.clientY +valueT;
document.getElementById("pop-editor").style.display="block";
e = e || window.event; //如果是IE
posX = e.clientX - parseInt(popDiv.style.left);
posY = e.clientY - parseInt(popDiv.style.top);
//alert("posX="+posX+" posY="+posY);
dragable = true;
//alert("posX="+posX+" posY="+posY);
document.onmousemove = move;
// el = window.event.srcElement;
//el=e.srcElement;
//el.setCapture();
}
}
function move(ev){
if(dragable == true && objClick!=null){
ev = ev || window.event;//如果是IE
//取消事件冒泡
//window.event.cancelBubble = false;
popDiv.style.left = (ev.clientX - posX)+ "px";
popDiv.style.top = (ev.clientY - posY) + "px";
//popDiv.style.left = (ev.clientX - posX) + "px";
//popDiv.style.top = (ev.clientY - posY) + "px";
}
}
function up(obj){
//获取选择单元格的TD对象
var i=0;
while(i<10 && obj!=null){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
//如果点击的是隐藏的，直接返回
if(obj.style.background!=colorY){
if(obj==null || obj.tagName!="TD"){
alert("放开鼠标的位置不是TD内。"+(obj==null?"null":obj.tagName));
return;
}
if(objClick==null){
alert("没有选中需要移动的内容。");
return;
}
//name="textareaTD" 判断移动的是否是大输入框，规则：大输入框只能和大输入框相互移动
//-----1----判断点击对象是不是大输入框
var objClickTTAFlag=true;
if(objClick.name!=null && objClick.name!="" && objClick.name=="textareaTD"){
//-----2----判断放开对象是不是大输入框
if(obj.name==null || obj.name=="" || obj.name!="textareaTD"){
//alert("大输入框只能和大输入框相互移动。");
//return;
}
objClickTTAFlag=false;
}
//-----2----判断放开对象是不是大输入框
if(obj.name!=null && obj.name!="" && obj.name=="textareaTD" && objClickTTAFlag==true){
//alert("非大输入框不能和大输入框相互移动。");
//return;
}
dragable = false;
document.getElementById("pop-editor").style.display="none";
//alert("up:"+obj.id);
//alert("up:"+obj.innerHTML);
//objInnerHTML=obj.innerHTML;//鼠标松开时，赋值接收单元格内容
//移动单元格
moveTD(obj);
//objClick.innerHTML=obj.innerHTML;
//obj.innerHTML=document.getElementById("pop-editor").innerHTML;
objClick=null;
//el = window.event.srcElement;
//el.setCapture();
//document.getElementById("xxx").focus();
}
}
//把鼠标放开时该单元格之后的每个单元格往后移动一个位置
function moveTD(obj)
{
//获取放开选择单元格的行对象
var trObj;
var upTD=obj;
var numberWhile=0;//控制只允许循环不超过10次，避免死循环
while(numberWhile<10){
if(upTD.parentNode!=null && upTD.parentNode.tagName=="TR"){
trObj=upTD.parentNode;
break;
}else{
upTD=upTD.parentNode;
}
numberWhile++;
}
//获取点击选择单元格的行对象
var trObjOld;
var upTDOld=objClick;
var numberWhileOld=0;//控制只允许循环不超过10次，避免死循环
while(numberWhileOld<10){
if(upTDOld.parentNode!=null && upTDOld.parentNode.tagName=="TR"){
trObjOld=upTDOld.parentNode;
break;
}else{
upTDOld=upTDOld.parentNode;
}
numberWhileOld++;
}
//判断点击和放开两者TD是否在同一个TABLE里面
if(trObj.parentNode!=trObjOld.parentNode){
//表示不再同一个表格中
alert("移动错误。");
return;
}
//-******************开始判断怎么移动***************************************
//判断是否是同一行之间的移动
var trObjTDNumber=0,trObjOldNumber=0;
if(trObj.rowIndex==trObjOld.rowIndex){//表示是同一行之间的移动
for(t=0;t<trObjOld.childNodes.length;t++){
if(trObjOld.childNodes[t]==obj){
//表示该对象是鼠标放开时的TD
trObjTDNumber=t;
}
if(trObjOld.childNodes[t]==objClick){
//表示该对象是鼠标放开时的TD
trObjOldNumber=t;
}
}
}
if(trObj.rowIndex>trObjOld.rowIndex || (trObj.rowIndex==trObjOld.rowIndex && trObjTDNumber>trObjOldNumber)){
//表示放开鼠标所在行（2行）大于鼠标点击的行（0行）
//***点击之后的所有单元格往前移动一个单元格，直至放开位置停止
//---------点击之后的所有单元格往前移动一个单元格，直至放开位置停止--------start------------
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
insertAfter(objClick,obj);
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
//---------点击之后的所有单元格往前移动一个单元格，直至放开位置停止--------end------------
}
else if(trObj.rowIndex<trObjOld.rowIndex || (trObj.rowIndex==trObjOld.rowIndex && trObjTDNumber<trObjOldNumber)){
//表示放开鼠标所在行（0行）大于鼠标点击的行（2行）
//***放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止
//---------放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止--------start------------
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
obj.parentNode.insertBefore(objClick,obj);
setSpanRowIsTDToAppoint(objOldAppointPanrentNode);
//---------放开之后的包括自身的所有单元格往后移动一个单元格，直至点击位置停止--------end------------
}
}
//设置跨行单元格内容移到表格指定位置
function setSpanRowIsTDToAppoint(objOldAppointPanrentNode)
{
/* //获得TD对象， 保存点击的TD对象内容
var i=0;
while(i<10){
if(obj!=null && obj.tagName=="TD"){
break;
}else{
obj=obj.parentNode;
}
i++;
}
var objOldAppointPanrentNode=obj.parentNode.parentNode.childNodes[0];
obj.parentNode.insertBefore(objClick,obj);
*/
while(objOldAppointPanrentNode!=null){
//判断是否需要推移，计算每行多少个单元格
var numTDSun=0;
for(nm=0;nm<objOldAppointPanrentNode.childNodes.length;nm++){
//删除为空的单元格
if(objOldAppointPanrentNode.childNodes[nm].innerHTML=="" || objOldAppointPanrentNode.childNodes[nm].innerHTML.length<11)
{
//执行删除空的单元格
objOldAppointPanrentNode.removeChild(objOldAppointPanrentNode.childNodes[nm]);
nm--;
//nlFlag=true;
//numTDSun--;
continue;
}
if(objOldAppointPanrentNode.childNodes[nm].colSpan==null || objOldAppointPanrentNode.childNodes[nm].colSpan=="")
{
numTDSun++;
}else{
numTDSun+=objOldAppointPanrentNode.childNodes[nm].colSpan;
}
}
//跳过为空的对象
while(objOldAppointPanrentNode.nextSibling!=null && (objOldAppointPanrentNode.nextSibling.innerHTML=="" || objOldAppointPanrentNode.nextSibling.childNodes.length==0)){
objOldAppointPanrentNode.parentNode.removeChild(objOldAppointPanrentNode.nextSibling);
//alert("跳过为空的对象null****!");
}
while(numTDSun>3){//表示需要移动 start
var isEndFlag=false;
if(objOldAppointPanrentNode.nextSibling==null)
{
//没有行，需要创建行
addRow_withInsert(objOldAppointPanrentNode.parentNode,numTDSun);
isEndFlag=true;
//alert("123="+(objOldAppointPanrentNode.nextSibling==null));
//alert(objOldAppointPanrentNode.parentNode.innerHTML);
}
var endObj=objOldAppointPanrentNode.childNodes[objOldAppointPanrentNode.childNodes.length-1];
if(endObj.innerHTML!="")
{
var endObjCLND=endObj.cloneNode(true);
objOldAppointPanrentNode.nextSibling.insertBefore(endObjCLND,objOldAppointPanrentNode.nextSibling.childNodes[0]);
}
if(endObj.colSpan!=null && endObj.colSpan!="" && endObj.colSpan==2){
endObj.innerHTML="";
endObj.colSpan=1;
endObj.width=endObj.offsetWidth/2;
}else{
objOldAppointPanrentNode.removeChild(objOldAppointPanrentNode.childNodes[objOldAppointPanrentNode.childNodes.length-1]);
}
//归零
numTDSun=0;
for(nm=0;nm<objOldAppointPanrentNode.childNodes.length;nm++){
if(objOldAppointPanrentNode.childNodes[nm].colSpan==null || objOldAppointPanrentNode.childNodes[nm].colSpan=="")
{
numTDSun++;
}else{
numTDSun+=objOldAppointPanrentNode.childNodes[nm].colSpan;
}
}//end for
if(isEndFlag==true && numTDSun<=3){//表示已经添加了一行
break;
}
}//表示需要移动 end
if(numTDSun<3 && objOldAppointPanrentNode.nextSibling!=null && objOldAppointPanrentNode.nextSibling.childNodes[0]!=null){//表示需要向上补充移动
var nextObjTD=objOldAppointPanrentNode.nextSibling.childNodes[0];
for(bf=0;bf<objOldAppointPanrentNode.childNodes.length;bf++){
objOldAppointPanrentNode.nextSibling.insertBefore(objOldAppointPanrentNode.childNodes[bf],nextObjTD);
bf--;
}
}
objOldAppointPanrentNode=objOldAppointPanrentNode.nextSibling;
}
//alert(objClick.parentNode.parentNode.innerHTML);
}
//添加行的另一种方法insertRow
function addRow_withInsert(tableObj,numTDSun){
var row=tableObj.insertRow(tableObj.rows.length);
//var countCell=tableObj.rows.item(0).cells.length;
//alert("******="+(6-(numTDSun-3)));
//numTDSun%3==0?(3*(numTDSun/3-1)):
for(var i=0;i<6-(numTDSun-3);i++){
var cell=row.insertCell(i);
cell.innerHTML="<h1>9</h1>";
}
}
//在表格操作位置后面新增一格
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
</script>
</body>
- test跨行移动.rar (4.5 KB)
- 下载次数: 4
0
顶
顶
0
踩
踩
分享到：
发表评论
相关推荐
"经典网页特效500"集合了大约500个精心设计的网页特效示例，为学习网页制作的初学者提供了丰富的实践素材。这些特效涵盖了JavaScript、jQuery等多种技术，旨在帮助学习者深入理解和应用这些技术。 JavaScript是一种...
网页特效在IT行业中是网页设计和开发的重要组成部分，它们能够为用户提供更加生动、交互性更强的浏览体验。HTML静态页面则是构建网页的基础，是网页内容的基石，通过HTML标记语言来组织网页结构和内容。实习页面则常...
网页特效大全是一个集合了多种网页视觉效果的资源库，它为网页设计师和开发者提供了丰富的创意元素，以增强网站的互动性和用户体验。这个压缩包中包含了"网页特效.exe"这个文件，很可能是一个应用程序或者演示程序，...
网页特效是网页设计中不可或缺的一部分，它为用户提供了丰富的交互体验，增强了网站的吸引力和可用性。网页特效代码通常由HTML、CSS、JavaScript等技术共同构建，这些代码可以帮助实现动态效果，如滑动、淡入淡出、...
圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞节网页特效圣诞...
JavaScript和jQuery是网页开发中的两种重要工具，它们在创建交互式和动态网页特效方面发挥着核心作用。本教程以任务驱动的方式，旨在帮助学习者掌握这两门技术的基础知识以及实现各种网页特效的方法。 首先，...
JavaScript是Web开发中不可或缺的一部分，尤其在网页特效制作上，它的功能强大且灵活。这篇教程将深入探讨如何利用JavaScript来创建吸引人的网页特效。 首先，我们来看"Dreamweaver网页制作教程.exe"，Dreamweaver...
"另类网页特效集锦"是一个专门针对网页特效设计的资源包，旨在帮助网页制作者创造独特、引人入胜的页面效果，提升网页的美观度和互动性。 1. **网页特效的定义与作用** 网页特效是指通过JavaScript、CSS3、HTML5等...
网页特效精灵是一款强大的脚本生成工具，专为Web开发者设计，旨在简化网页特效、菜单以及各种JavaScript脚本和CSS样式的创建过程。这款工具通过提供直观的用户界面和丰富的预设模板，使得即使是对编程不熟悉的设计者...
【网页特效梦工厂】是一个专为网页设计师和前端开发者打造的资源库，它汇集了丰富的网页特效代码、模板和工具，旨在帮助用户快速构建出具有视觉吸引力和交互体验的网页。"网页特效梦工厂"这个名字寓含了其致力于提供...
网页特效是网页设计中不可或缺的一部分，它为用户提供了丰富的交互体验，增强了网站的吸引力和可用性。本资源包包含了一系列的网页特效实例，其特点在于代码简洁，易于理解和实现。 一、网页特效概述 网页特效是指...
特效公主是一款专为网页开发者和设计师打造的特效生成工具，旨在简化网页特效的制作过程，提高工作效率。通过这款工具，用户无需深入理解复杂的JavaScript或CSS代码，就能轻松创建出各种吸引眼球的动态效果，从而...
HTML（HyperText Markup Language）网页特效大全是网页开发者在创建吸引人的、交互性强的网站时不可或缺的一部分。HTML作为网页的基础语言，虽然其本身并不具备复杂的动态功能，但通过与CSS（Cascading Style Sheets...
这本书籍《JavaScript网页特效实例大全》的源码提供了一个丰富的学习资源，帮助开发者深入理解和实践JavaScript的各种特效应用。 首先，我们要了解JavaScript的基础。JavaScript是一种解释型、面向对象的脚本语言，...
软件里面收集的网页特效多、新、全、酷。 所有特效及特效预览仅在同一窗体之中，所见即所得。 使用简单方便，软件绿色、小巧、精致，是建设网站设计网页的首选。 所有特效均经过测试无误，特效随时添加，软件...
JavaScript，一种广泛应用于Web开发的脚本语言，是创建动态网页和实现网页特效的核心工具。在"Java Script网页特效实例大全"中，我们能够找到一系列关于JavaScript特效的实践案例，帮助开发者提升网页交互性和视觉...
【网页特效秀show4】是一款集成了多种JavaScript特效的资源包，主要针对网页开发者设计，提供了丰富的预览和使用选项，让网页设计更加生动有趣。这个资源包包含了各种JavaScript（js）代码，使得开发者能够轻松地在...
"网页特效咖啡豆"是一个以JavaScript为主要技术的特效集合，旨在为网页开发提供丰富的动态视觉效果。这个资源包中包含了多种JavaScript实现的特效，适用于网页设计师和前端开发者，以提升网站的用户体验和互动性。 ...
网页特效在现代网页设计中扮演着至关重要的角色，它们能够提升用户体验，使网站更具吸引力，同时也能更好地传达信息。"常用网页特效代码"这个主题涵盖了众多用于增强网页交互性和视觉效果的技术。以下是一些关键的...