本帖最后由 egeg3000 于 2009-08-16 18:02:41 编辑

解决方案 »

  1.   

    [email protected],麻烦兄弟发一下~~
      

  2.   

    您那个我早已经看过了,可惜是用.net和VB做的
      

  3.   

    我初步看了是用层然后连接xml数据实现的!
      

  4.   

    这个应该比较简单吧读取数据库表,字段:颜色,内容,名字,图案,然后就是Ajax分页显示了。然后页面上就是js问题了。参考拖动层。。
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>简单的测试页面</title>
      <style type="text/css">
      <!--
        html
        {
          height: 100%;
        }
        body
        {
          margin: 0px;
          padding: 0px;
          height: 100%;
        }
        #dt_3
        {
          cursor: pointer;
        }
        div#mbDIV
        {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          background-color: #AAAAAA;
          z-index: 10;
          filter: alpha(opacity=80);opacity:0.8;
        }
        div#loginDIV
        {
          position: absolute;
          width: 300px;
          height: 150px;
          background-color: #FFFF00;
          z-index: 20;
        }
        div#loginTopDIV
        {
          width: 100%;
          height: 20px;
          background-color: #FF0000;
          cursor: move;
        }
      -->
      </style>
      <script type="text/javascript">
      <!--
        function show(ele)
        {
          eval(ele + ".style.display = ''");
        }
        function hidden(ele)
        {
          eval(ele + ".style.display = 'none'");
        }
      //-->
      </script>
    </head><body>
    <div style="overflow: hidden;">
    <h3>请点击 --> 03号拖拉机</h3>
    <p id="dt_1">01号拖拉机</p>
    <p id="dt_2">02号拖拉机</p>
    <p id="dt_3">03号拖拉机</p>
    <p id="dt_4">04号拖拉机</p>
    <p id="dt_5">05号拖拉机</p>
    <p id="dt_6">06号拖拉机</p>
    <p id="dt_7">07号拖拉机</p>
    <p id="dt_8">08号拖拉机</p>
    <p id="dt_9">09号拖拉机</p>
    <p id="dt_10">10号拖拉机</p>
    <p id="dt_11">11号拖拉机</p>
    </div><div id="mbDIV" style="display: none;"></div>
    <div id="loginDIV" style="top: 200px;left: 300px;display: none;">
    <div id="loginTopDIV">Move</div>
    <p style="text-align: center;">登陆内容在这里哦</p>
    <form action="#" method="get" style="text-align: center;">
    <input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" />
    </form>
    </div><script type="text/javascript">
    <!--
    /**
    * 这里是乱七八遭信息
    * */
      for(var i=1;i<=11;i++)
      {
        eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
      }
      var mbDIV = document.getElementById("mbDIV");
      var loginDIV = document.getElementById("loginDIV");
      var loginTopDIV = document.getElementById("loginTopDIV");  document.getElementById("button_1").onclick = function()
                                                    {
                                                      hidden("loginDIV");
                                                      hidden("mbDIV");
                                                    }
      document.getElementById("button_2").onclick = function()
                                                    {
                                                      hidden("loginDIV");
                                                      hidden("mbDIV");
                                                    }
      dt_3.onclick = function()
                     {
                       loginDIV.style.top = "200px";
                       loginDIV.style.left = "300px";
                       show("loginDIV");
                       show("mbDIV")
                     }/**
    *这里写的是拖动信息
    * */
        loginTopDIV.onmousedown = Down;
        var tHeight,lWidth;
        function Down(e)
        {
            var event = window.event || e;
            tHeight = event.clientY  - parseInt(loginDIV.style.top.replace(/px/,""));
            lWidth  = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
            document.onmousemove = Move;
            document.onmouseup   = Up;
        }
        function Move(e) {
            var event = window.event || e;
            var top = event.clientY - tHeight;
            var left = event.clientX - lWidth;
            //判断 top 和 left 是否超出边界
            top = top < 0 ? 0 : top;
            top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
            left = left < 0 ? 0 : left;
            left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
            loginDIV.style.top  = top + "px";
            loginDIV.style.left = left +"px";
        }
        function Up() {
            document.onmousemove = null;
        }
    //-->
    </script>
    http://www.cnblogs.com/wjfluisfigo/archive/2009/01/15/1359309.html
    </body>
    </html>
    以上代码是简单的遮罩层(转的)。
    层的显示和拖动功能都有。
    剩下的就是每页做一定数量的层,然后根据XML文件,控制显示内容,是否显示。
      

  6.   

    兄台能否让我学习一下代码如果可以的话发到[email protected],感激不尽!!