Google可拖拉的层是怎么做的?

我这有一个以前写的代码，虽然不是GOOGLE用的方法，但是也可以实现拖拉，给你参考下吧
<hr width=100%>
<table id="table1" style="width:200;height:30;background-color:#ff0000;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="td1" style="display:none">
sadfsdfsdfsdfasdasdsda
</td>
</tr>
</table>
<hr width=100%>
<input name=button1 type=button value="按" onclick="goon()">
<input name=flag type=hidden value="1">
<script language=javascript>
function goon()
{
if(document.getElementById("flag").value=="1")
{
document.getElementById("td1").style.display='';
//alert(document.getElementById('table1').style.height);
document.getElementById('table1').style.height=parseInt(document.getElementById('table1').style.height)+parseInt(4);
if(parseInt(document.getElementById('table1').style.height)>parseInt(50))
{
document.getElementById("flag").value="2";
return
}
setTimeout("goon()",100);
}
else
{
document.getElementById('table1').style.height=parseInt(document.getElementById('table1').style.height)-parseInt(4);
if(parseInt(document.getElementById('table1').style.height)<parseInt(30))
{
document.getElementById("td1").style.display='none';
document.getElementById("flag").value="1";
return
}
setTimeout("goon()",100);
}
}
</script>

解决方案 »

  1.   

    非常感谢hbhbhbhbhb1021(天外水火(我要多努力))!
    我们老板就看上了google那个东西了!我真不知道那东西怎么做的
    把网页弄下来看,看起来像是加密或者混淆过的,根本读不了!
    还望高手指点!
      

  2.   

    Dreamweaver,Fireworks里面就可以做出来
      

  3.   

    你们老板真有眼光。你应该对他说，给我google一样的待遇，我就给你做出跟google一样的东西，呵呵。
      

  4.   

    www.99scj.com
    全站ajax技术实现
    ！！！右键，拖动
    在线收藏，共享收藏，在线新闻阅读，在线新闻订阅，自定义导航。
    全部ajax实现
    登陆后机有很好的登陆效果
      

  5.   

    看了几天,的确是用到了AJAX技术,后来发现老外的网站有很多这样的例子,楼上说的www.start.com等等,国内的网站也有,基本上都是Copy别人的代码.
    研究中,还请高人指给分析下实现过程!
      

  6.   

    也做了个简单的例子
    <HTML>
    <HEAD>
    <TITLE> emu's div-drag </TITLE>
    <META NAME="Author" CONTENT="emu">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var activeDiv,activeSpan,beforeDiv;
    function active(e){
    if(e.tagName=="SPAN"){
    activeSpan = e;
    return;
    }
    activeDiv = e.cloneNode(true);
    document.body.insertBefore(activeDiv);
    with(activeDiv.style){
    position="absolute";
    backgroundColor="yellow";
    filter="alpha(opacity=50)";
    left=event.x-20;
    top=event.y;
    }
    activeDiv.srcElement=e;
    activeDiv.onmousedown=null;
    }
    function releaseDiv(){
    if(!activeDiv) return;
    document.body.removeChild(activeDiv)
    var se = activeDiv.srcElement;
    var p = se.parentNode;
    activeDiv=null;
    if(beforeDiv && beforeDiv==se) return;
    if(beforeDiv && beforeDiv.parentNode==activeSpan)
    activeSpan.insertBefore(p.removeChild(se),beforeDiv)
    else
    activeSpan.insertBefore(p.removeChild(se))}
    function moveDiv(){
    if(!activeDiv) return;
    with(activeDiv.style){
    left=event.x-20;
    top=event.y;
    }
    }
    function before(e){
    beforeDiv=e;
    }
    var aaa=new Array(21);
    //-->
    </SCRIPT>
    </HEAD><BODY onmouseup="releaseDiv()" onmousemove="moveDiv()" onselectstart="return false">
    <span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)">
    <SCRIPT>//自动生成假数据
    for(var i=0;i<10;i++) document.write(" <div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#99FFFF\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(i)+"</span></div>")
    </SCRIPT>
    </span>
    <span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)">
    <SCRIPT>//自动生成假数据
    for(var i=97;i<123;i++) document.write(" <div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#FFFFCC\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")
    </SCRIPT>
    </span>
    <span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)">
    <SCRIPT>//自动生成假数据
    for(var i=65;i<91;i++) document.write(" <div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#FFCCFF\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")
    </SCRIPT>
    </span></BODY>
    </HTML>
      

  7.   

    google还有个释放鼠标的时候的消隐效果，也是一些烦琐的脚本而已啦，其实基本的原理掌握了就好。
      

  8.   

    上面的例子是放开鼠标了才移动层的，google的效果是拖拉鼠标的时候层跟着走，可以这样做：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> emu's div-drag </TITLE>
    <META NAME="Author" CONTENT="emu">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var activeDiv,activeSpan,beforeDiv;
    function active(e){
    if(e.tagName=="SPAN"){
    if(!activeDiv) return;
    activeSpan = e;
    if(activeDiv.srcElement.parentNode!=e)
    before(e.lastChild);
    return;
    }
    activeDiv = e.cloneNode(true);
    document.body.insertBefore(activeDiv);
    with(activeDiv.style){
    position="absolute";
    backgroundColor="yellow";
    filter="alpha(opacity=50)";
    left=event.x-20;
    top=event.y+2;
    }
    activeDiv.srcElement=e;
    activeDiv.onmousedown=null;
    activeDiv.onmousemove=null;
    }
    function releaseDiv(){
    if(!activeDiv) return;
    document.body.removeChild(activeDiv)
    var se = activeDiv.srcElement;
    var p = se.parentNode;
    activeDiv=null;
    }
    function moveDiv(){
    if(!activeDiv) return;
    with(activeDiv.style){
    left=event.x-20;
    top=event.y+2;
    }
    }
    function before(e){
    if(!activeDiv || e.nextSibling==activeDiv)return;
    if(e!=activeDiv.srcElement)
    if(e.nextSibling&&e.nextSibling.parentNode==e.parentNode&&e.nextSibling!=e.parentNode.lastChild)
    e.parentNode.insertBefore(activeDiv.srcElement.parentNode.removeChild(activeDiv.srcElement),e.nextSibling)
    else
    e.parentNode.insertBefore(activeDiv.srcElement.parentNode.removeChild(activeDiv.srcElement))
    }
    var aaa=new Array(21);
    //-->
    </SCRIPT>
    </HEAD><BODY onmouseup="releaseDiv()" onmousemove="moveDiv()" onselectstart="return false">
    <span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)">
    <SCRIPT>//自动生成假数据
    for(var i=0;i<10;i++) document.write(" <div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#99FFFF\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(i)+"</span></div>")
    </SCRIPT>
    </span>
    <span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)">
    <SCRIPT>//自动生成假数据
    for(var i=97;i<123;i++) document.write(" <div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#FFFFCC\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")
    </SCRIPT>
    </span>
    <span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)">
    <SCRIPT>//自动生成假数据
    for(var i=65;i<91;i++) document.write(" <div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#FFCCFF\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")
    </SCRIPT>
    </span></BODY>
    </HTML>
      

  9.   

    看了几天,的确是用到了AJAX技术,后来发现老外的网站有很多这样的例子,楼上说的www.start.com等等,国内的网站也有,基本上都是Copy别人的代码.
    研究中,还请高人指给分析下实现过程!
    ========================================
    依愚人之见，实现拖动效果与AJAX无关，单纯用JavaScript就能实现。
      

  10.   

    说什么copy别人的代码，你copy一个试试看，有那么好copy的嘛？
      

  11.   

    的确,实现拖拉完全还是javascript脚本实现的,只是在动态数据交互的时候用到了AJAX技术.
    看了国内的几个网站的脚本的代码的确是翻版的.当然copy的前提是先读懂别的代码,只是不是原创的而已,只能感慨英文资料的浩瀚!
      

  12.   

    感谢emu(祝福后山) 的代码,既简洁又实用,学习中!
    一直觉得javascript是个脚本语言,不值一学,没想到真的想要用好它才觉得它的博大!汗
      

  13.   

    http://www.99scj.com
    99收藏夹
    全站ajax实现
    可任意的拖拉！！！
      

  14.   

    这里也有一个移动tr的:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <script language="javascript">
    var beginMoving=false;
    function MouseDownToMove(obj){
    obj.style.zIndex=1;
    obj.mouseDownY=event.clientY;
    obj.mouseDownX=event.clientX;
    beginMoving=true;
    obj.setCapture();
    }function MouseMoveToMove(obj){
        if(!beginMoving) return false;
    obj.style.top = (event.clientY-obj.mouseDownY);
    obj.style.left = (event.clientX-obj.mouseDownX);
    }
    function MouseUpToMove(obj){
    if(!beginMoving) return false;
    obj.releaseCapture();
    obj.style.top=0;
    obj.style.left=0;
    obj.style.zIndex=0;
    beginMoving=false;
    var tempTop=event.clientY-obj.mouseDownY;
    var tempRowIndex=(tempTop-tempTop%25)/25;
    if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
    else tempRowIndex=tempRowIndex+obj.rowIndex;
    if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
    obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
    }</script>
    </head>
    <body >
    用鼠标移动TR<br>
    <TABLE WIDTH="300" BORDER="1" >

    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
    <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR> </script>
    </TABLE> </body>
    </html>
      

  15.   

    net 2.0 里面有个webpart控件，可以轻易实现拖放，不过每次拖放完页面都要postback，有第三方组件也能实现，而且用ajax技术无刷新，比如ComponentArt。当然，自己写客户端代码也能实现，没有仔细研究过。
      

  16.   

    在ns4/ie4的时代写过一个跨浏览器的，不过现在都不能用了，因为很多属性已经改变了drag&drop确实与ajax无关，原理是这样的
    javascript里面有个event对象（浏览器不同也有不同名字）
    它其中有坐标属性
    drag就是检测鼠标按下（down而不是click）
    然后定时根据event.x/y赋值给需要移动的控件的left/top属性
    是它的位置改变drop就是检测鼠标up，然后把最后x/y的值定位
    至于插入那些操作是另外调整的上面的x/y都是鼠标的坐标，可拖动对象的坐标需要相关计算
    在ns4/ie4时代很兴写这个的，例如随鼠标移动的文字、变幻曲线什么的都是相同的原理
    只不过少了drop操作而已
    这里有一个教程，跨浏览器的，不过全英文
    http://www.webreference.com/programming/javascript/mk/column2/index.html