Question

我有一个html页面，分为单行和两列。第1列的宽度为90％，第2列的宽度为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并在mouseout上向后滑动

1 个答案: