如何在鼠標懸停時將TD從右向左滑動並在鼠標懸停時向回滑動

Question

我有一個HTML頁面，該頁面分為單行和兩列。 第一列的寬度為90％，第二列的寬度為10％。

當頁面加載時，我希望第二列應該完全隱藏，並且在整個頁面上應該有第一列的內容。

但是，當我將鼠標移到右側那10％的頁面上時。 該td的內容應該是滑動的，當我移開鼠標時，它應該向右滑動（隱藏）。

我正在嘗試這樣做：

$(document).ready(function() {
  document.getElementById("map-canvas").style.height = document.body.clientHeight + 'px';
  $( "#side" ).mouseover(function() {
    document.getElementById("map-canvas").className = "OverlayEffect";
    $( "#map-canvas" ).animate({
      width: "100%"
    });
  });
  $( "#side" ).mouseout(function() {
    $( "#map-canvas" ).animate({
      width: "90%"
    });
  });
});

HTML：

<table width="100%">
   <tr>
      <td width="90%" id="map">
         <!--  start  Loading Fancy Box handling -->
         <div id="modalMsg">
            <br /> <br /> <imgsrc="../DiagnosticDrop4/static/images/ajax-loader.gif" /> <br /> <br />
         </div>
         <!--  end  Loading Fancy Box handling -->
         <div id="map-canvas"></div>
      </td>
      <td width="10%" class="Sidebar" id="side">
         <div id="map-canvas1">
            <a id='link' href='../DiagnosticDrop4/san.html'>
               <h3>
               <center>Add/Delete SAN</center>
            </a>
         </div>
         <div id="map-canvas2">
            <a id='alink' href='../DiagnosticDrop4/ParamIntervalDetails'>
               <h3>
               <center>24hr Dashboard</center>
            </a>
         </div>
      </td>
   </tr>
</table>

Answer 1

試試這個代碼，我讓它按照您想要的方式工作

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script>
                    $(document).ready(function() {
            $( "#side" ).hide();

            $("body").on("mousemove",function(event) {
                if (event.pageX >= $( document ).width() - 50) {
                    $( "#map" ).width('0%');
                    $( "#side" ).width('100%');
                    $( "#side" ).show();
                }
                else
                {
                    $( "#map" ).width('100%');
                    $( "#side" ).width('0%');
                    $( "#side" ).hide();    
                }
            });

        });

        </script>
    </head>

    <body>
        <table width="100%" border="1">
            <tr>
                <td width="90%" id="map">
                <!--  start  Loading Fancy Box handling -->
                    <div id="modalMsg">
                    <br /> <br /> <imgsrc="../DiagnosticDrop4/static/images/ajax-loader.gif" /> <br /> <br />
                    </div> <!--  end  Loading Fancy Box handling -->

                    <div id="map-canvas">

                    </div>
                </td>

                <td width="10%" class="Sidebar" id="side">
                    <div id="map-canvas1">
                        <a id='link' href='../DiagnosticDrop4/san.html'><h3>
                        <center>Add/Delete SAN</center></a>
                    </div>

                    <div id="map-canvas2">
                        <a id='alink' href='../DiagnosticDrop4/ParamIntervalDetails'><h3>
                        <center>24hr Dashboard</center></a>
                    </div>
                </td>
            </tr>
        </table>
    </body>
    </html>

如何在鼠標懸停時將TD從右向左滑動並在鼠標懸停時向回滑動

問題描述

1 個解決方案

解決方案1
0 2013-11-24 05:36:45

如何在鼠標懸停時將TD從右向左滑動並在鼠標懸停時向回滑動

問題描述

1 個解決方案

解決方案1 0 2013-11-24 05:36:45

解決方案1
0 2013-11-24 05:36:45