点击文字左侧滑出菜单

最新推荐文章于 2018-05-02 15:51:30 发布

我本良人

最新推荐文章于 2018-05-02 15:51:30 发布

阅读量1.4k

点赞数

分类专栏： asp.net

asp.net 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{
    width:150px;
    height:250px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:15px;
    height:65px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}
</style>
<script type="text/javascript">
    window.onload = function () {
        var odiv = document.getElementById('div1');
        odiv.onmouseover = function () {

            startmove(0, 10); //第一个参数为div   left属性的目标值   第二个为 每次移动多少像素

        }
        odiv.onmouseout = function () {
            startmove(-150, -10);
        }
    }

    var timer = null;
    function startmove(target, speed) {

        var odiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function () {

            if (odiv.offsetLeft == target) {
                clearInterval(timer);
            }
            else {
                odiv.style.left = odiv.offsetLeft + speed + 'px';
            }

        }, 30)

    }
    
</script>
</head>

<body>
<div id="div1">
    <center>
    <table style="width:140px;height:240px">
        <tr>
            <td style="width:140px;height:40px">
                <asp:HyperLink ID="HyperLink1" runat="server">导航一</asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td style="width:140px;height:40px">
                <asp:HyperLink ID="HyperLink2" runat="server">导航二</asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td style="width:140px;height:40px">
                <asp:HyperLink ID="HyperLink3" runat="server">导航三</asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td style="width:140px;height:40px">
                <asp:HyperLink ID="HyperLink4" runat="server">导航四</asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td style="width:140px;height:40px">
                <asp:HyperLink ID="HyperLink5" runat="server">导航五</asp:HyperLink>
            </td>
        </tr>
   
    </table>
<span>侧边栏</span>
</center>
</div>
</body>
</html>