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

实现测试浮动回到顶部

法一：用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>

web页面浮动回到顶部功能和浮动广告的更多相关文章

js实现回到顶部功能
js实现回到顶部功能一.总结一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
js刷新页面不回到顶部
今天遇到刷新页面不回到顶部的需求 window.location.reload();方法已经解决了问题,但是ie8不支持,后来采用的是锚点这个方法 window.location = '/plan/g ...
URL链接后面的参数解析，与decode编码解码；页面刷新回到顶部jquery
function request() { var urlStr = location.search; ) { theRequest = []; return; } urlStr = urlStr.su ...
jQuerry点击按钮回到顶部功能
简单实现点击按钮回到顶部功能
jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧我总 ...
【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
[HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

随机推荐

javascript笔记---貌似大叔
1.原型式继承和类式继承的区别在基于类的面向对象方式中,对象(object)依靠类(class)来产生.而在基于原型的面向对象方式中,对象(object)则是依靠构造器(constructor)利 ...
c#跨窗体调用操作
我知道的常用的有三种,以前记录的笔记: 1.通过构造函数实现在form1的load事件中new form2时在构造函数里添加一个参数此参数就是form1类型的参数,同时记得在form2里重写构 ...
设置图层符号风格为用已有mxd里的同名图层风格
//要加载的IFeatureClass IFeatureClass pFeatClass = dataset as IFeatureClass; //新建要加载到mxd文档中的图层 IFeatureL ...
windows github 搭建与使用
git/github使用以下是全部在命令行使用(windows/github) 注册账户以及创建仓库先在github建立账号和创建仓库,此时为空的仓库配置git下载并安装 git windows版本 ...
【Winform】 Enum逆向解析
将字符串转换成Enum类型 Enum.Parse:将一个或多个枚举常数的名称或数字值的字符串表示转换成等效的枚举对象. 名称说明 Parse(Type, String) 将一个或多个枚举常数 ...
CentOs7&zookeeper
下载安装包 wget http://www.apache.dataguru.cn/zookeeper/stable/zookeeper-3.4.6.tar.gz 解压 tar xzvf zookeep ...
C# 在运行时动态创建类型
C# 在运行时动态的创建类型,这里是通过动态生成C#源代码,然后通过编译器编译成程序集的方式实现动态创建类型 public static Assembly NewAssembly() { //创建编译 ...
margin的BUG(2)
继续上一次的学习,这次又发现了margin的第二个bug.既当同时对两个相邻的div盒子设置margin时,他们之间的间隙不能正常显示. 具体表述为:先建立两个div1和div2 <div cl ...
安装完MySQL后必须要调整的10项配置
2014年02月10日11:11 来源:开源中国作者:BoydWang, 美好的2014, DrZ 编辑:徐志远标签: 配置 , mysql , 数据库 [IT168 评论]当我们被人雇来监测My ...
sublime 编辑完自动生成tmp的备份
是安装phptool之后造成的,卸载即可 http://bbs.csdn.net/topics/390826865

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

web页面浮动回到顶部功能和浮动广告的更多相关文章

随机推荐

热门专题