asp.net 長表單填寫水平滾動條滑動效果

暖楓無敵發表於2012-04-05
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GrowthMonitor.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../_rec/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        #nav
        {
            position: fixed;
            top: 5px;
            right: 10px;
        }
        #nav span
        {
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
    <!--[if IE 6]>
        <style type="text/css">
            #nav{position:absolute;width:200px;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
        </style>
    <![endif]-->
    <script type="text/javascript">
        $(function () {
            var posArray = [300, 700, 1000, 1500];
            var siteName = getCurrentSiteName();
            var index = 0;
            var span_width = 0;

            $(".table-nav span").each(function (i) {
                $(this).click(function () {
                    $(document).scrollLeft(posArray[i]);
                    if (i == 0) {
                        span_width = 750;
                    } else if (i == 1) {
                        span_width = 1300;
                    } else if (i == 2) {
                        span_width = 1850;
                    } else if (i == 3) {
                        span_width = 2300;
                    }
                    $("#btnFollow").css("left", span_width + "px");
                    $("#go" + i).css("color", "red").siblings().css("color", "black");
                });
            });

            if (siteName  == "百度") {
                index = 0;
                span_width = 750;
                $("#go0").css("color", "red");
            } else if (siteName  == "谷歌") {
                index = 1;
                span_width = 1300;
                $("#go1").css("color", "red");
            } else if (siteName  == "新浪") {
                index = 2;
                span_width = 1850;
                $("#go2").css("color", "red");
            } else if (siteName  == "騰訊") {
                index = 3;
                span_width = 2300;
                $("#go3").css("color", "red");
            }
            $("#btnFollow").css("left", span_width + "px");
            $(document).scrollLeft(posArray[index]);
        });

        //獲取當前門戶名稱
        function getCurrentSiteName() {
            var obj = SiteMonitor.Enter.Index.getCurrentSiteName();
            return obj.value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="nav">
        <span id="go0">百度</span><span id="go1">谷歌</span><span id="go2">新浪</span><span id="go3">騰訊</span>
    </div>
    <table width="2500px">
        <tr>
            <td style="width:500px">百度</td>
            <td style="width:500px">谷歌</td>
            <td style="width:500px">新浪</td>
            <td style="width:500px">騰訊</td>
        </tr>
        <tr>
            <td style="width:500px">百度</td>
            <td style="width:500px">谷歌</td>
            <td style="width:500px">新浪</td>
            <td style="width:500px">騰訊</td>
        </tr>
        <tr>
            <td style="width:500px">百度</td>
            <td style="width:500px">谷歌</td>
            <td style="width:500px">新浪</td>
            <td style="width:500px">騰訊</td>
        </tr>
        <tr>
            <td style="width:500px">百度</td>
            <td style="width:500px">谷歌</td>
            <td style="width:500px">新浪</td>
            <td style="width:500px">騰訊</td>
        </tr>
        <tr>
            <td style="width:500px">百度</td>
            <td style="width:500px">谷歌</td>
            <td style="width:500px">新浪</td>
            <td style="width:500px">騰訊</td>
        </tr>
        <tr>
            <td style="width:500px">百度</td>
            <td style="width:500px">谷歌</td>
            <td style="width:500px">新浪</td>
            <td style="width:500px">騰訊</td>
        </tr>
    </table>
    <div id="btnFollow" style="position: absolute; width: 200px;">
      <input type="button" value="bao"/> 
   </div>
   </form>
</body>
</html>


相關文章