页面置顶特效 

<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">
        body
        {
            height: 3000px;
        }
        #divUpDown
        {
            position: fixed;
            top: 300px;
            right: 2px;
        }
        #divUpDown span
        {
            cursor: pointer;
            width: 48px;
            height: 48px;

            display: block;
        }
        #divUpDown .top
        {
            background: url(images/updown.png) left top no-repeat;
        }
        #divUpDown .top:hover
        {
            background: url(images/updown.png) right top no-repeat;
        }
        #divUpDown .bottom
        {
            background: url(images/updown.png) left bottom no-repeat;
        }
        #divUpDown .bottom:hover
        {
            background: url(images/updown.png) right bottom no-repeat;
        }
    </style>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //滚动时 控制置顶div的显示与隐藏
            $(window).scroll(function () {
                if ($(window).scrollTop()>400) {
                    $("#divUpDown").fadeIn(200);
                }
                else {
                    $("#divUpDown").fadeOut(200);
                }
            });
            $("#divUpDown .top").click(function () { $("html,body").animate({ scrollTop: "0px" }, 500); });
            $("#divUpDown .bottom").click(function () { $("html,body").animate({ scrollTop: $(document).height() + "px" }, 500); });
        });
    </script>
</head>
<body>
   <div id="divUpDown">
   <span class="top"></span>
   <span class="bottom"></span>
   </div>
</body>
</html>

　　

 

用到的图片

posted @ 2013-03-28 16:52  程序有Bug  阅读(726)  评论(0)    收藏  举报