web页面浮动回到顶部功能和浮动广告

最新推荐文章于 2020-12-01 15:32:11 发布

weixin_33946605

最新推荐文章于 2020-12-01 15:32:11 发布

阅读量278

点赞数

文章标签： javascript xhtml c# ViewUI

实现测试浮动回到顶部

法一：用js实现
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BackToTopTwo.aspx.cs" Inherits="PracticeCollectionTwo.BackToTopTwo" %>

<!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="jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .backToTop
        {
            position: absolute;
            width: 100px;
            border: 1px #ccc solid;
            height: 20px;
            z-index: 2000;
            background-color: #ccc;
            white-space: pre-wrap;
            left: 100%;
            margin-left: -102px;
            display: none;
        }
        
        .backToTop a:visited, .backToTop a:active, .backToTop a:link,.backToTop a:hover
        {
            text-decoration: none;
            font-size: 18px;
        }
        .backToTop
        {
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h2>
        对联浮动广告</h2>
    <div class="backToTop" id='backToTop'>
        <a href="#">回到顶部</a>
    </div>
    <input type="button" id='openAbs' value='显示对联广告'>
    <script type="text/javascript">
        for (var i = 0; i < 100; i++) {
            document.writeln(i+"<br/>");
        }
    </script>
    <script type="text/javascript">
        window.onload = function () {

            var absTop = function () {
                if (!this.backToTop) return;
                var top = ((document.body.scrollTop || document.documentElement.scrollTop) + window.screen.availHeight - 200) + "px";
                this.backToTop.style.top = top;
            };

            var scrollEvent = (function () {
                window.onscroll = function () {
                    absTop();
                };
            })();

            $("#backToTop").show();
            absTop();
        };
    </script>
</body>
</html>

法二：用样式

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <script src="jquery.js" type="text/javascript"></script>
    <title></title>
       <style type="text/css">
        .backToTop
        {
            position: fixed;
            width: 100px;
            border: 1px #ccc solid;
            height: 20px;
            z-index: 2000;
            background-color: #ccc;
            top: 650px;  
        }        
        .backToTop a:visited, .backToTop a:active, .backToTop a:link,.backToTop a:hover
        {
            text-decoration: none;
            font-size: 18px;
        }
        .backToTop
        {
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
      <script type="text/javascript">
          for (var i = 0; i < 100; i++) { document.writeln(i + "<br />"); } 
      </script>
     <div class="backToTop" id='backToTop'>
        <a href="#" >回到顶部</a>
    </div>
    <script type="text/javascript">
        $("#backToTop").hide();
        $(".backToTop").click(function () {
            $(window).scrollTop(0);
        });

        $(window).scroll(function () {
            if ($(window).scrollTop() < 100) {
                $("#backToTop").hide();

            }
            else {
                $("#backToTop").show();
            }
        });
    </script>
</body>
</html>

实现测试浮动广告

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BackToTop.aspx.cs" Inherits="PracticeCollectionTwo.BackToTop" %>

<!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>
    <style type="text/css">
        .coupletAds
        {
            position: absolute;
            width: 100px;
            border: 1px #ccc solid;
            height: 20px;
            z-index: 2000;
            background-color: #ccc;
            white-space: pre-wrap;
            display: none;
        }
        #coupletAdsLeft
        {
            left: 5px;
        }
        #coupletAdsRight
        {
            left: 100%;
            margin-left: -102px;
        }
        .coupletAds a:visited ,.coupletAds a:active,.coupletAds a:link{
            text-decoration: none;
            font-size: 18px;
            
        }
    </style>
</head>
<body>
    <h2>
        对联浮动广告</h2>
     
    <div class="coupletAds" id='coupletAdsRight'><a href="#">回到顶部</a> </div>
    <input type="button" id='openAbs' value='显示对联广告'>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <p>
        测试浮动广告```````````</p>
    <br>
    <script type="text/javascript">
        window.onload = function () {
            //对联广告单击显示
            document.getElementById("openAbs").onclick = function () {
                var coupletAdsRight = null,
                coupletAds = function (absRight) {
                    coupletAdsRight = absRight;
                    this.coupletAdsRight.style.display = "block";
                    absTop();
                },
                absTop = function () {//两个对联层的top位置
                    if (!this.coupletAdsRight) return;
                    //如果 document.body.scrollTop == 0 选则document.documentElement.scrollTop值，
                    var top = ((document.body.scrollTop || document.documentElement.scrollTop) + window.screen.availHeight - 200) + "px";
                    this.coupletAdsRight.style.top = top;
                },
                scrollEvent = (function () {//滚轴事件
                    window.onscroll = function () {
                        absTop(); //重新修正广告top
                    }
                })();
                coupletAds(document.getElementById("coupletAdsRight"));
            }
        };
    </script>
</body>
</html>

weixin_33946605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web页面浮动回到顶部功能和浮动广告

实现测试浮动回到顶部法一：用js实现&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BackToTopTwo.aspx.cs" Inherits="PracticeCollectionTwo.BackToTopTwo" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD
复制链接

扫一扫