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 ...
随机推荐
- Swift常量和变量以及命名规范
我们在上一章中介绍了如何使用Swift编写一个HelloWorld小程序,其中就用到了变量.常量和变量是构成表达式的重要组成部分.常量在声明和初始化变量时,在标识符的前面加上关键字let,就可以把该变 ...
- C# 线程--第二线程方法
概述 上一章节中和大家分享了线程的基础使用方法.在这一章中来和大家分享线程的一些常用方法. 主要包括:线程阻塞,线程终止,线程锁三方面. Thread 的 Sleep 和 Join 方法 Thread ...
- 一些常用sqlite语句
1,如果表不存在就新建一个 CComBSTR bstrCreatBat(L”CREATE TABLE IF NOT EXISTS tb_Name (\ rowIdIndex INTEGER PRIM ...
- Easyui 生成layout
Easyui 生成layout var $tabs; var $body; var $south; function appendLayout(title, href) { if (!$body) $ ...
- excel 导入功能
一:示例代码 //InputStream fis = new FileInputStream(tomcaturl+this.awardTask.getFileRoute());//可以通过上述方式获得 ...
- WinForm窗体间如何传值的几种方法
(转) 窗体间传递数据,无论是父窗体操作子窗体,还是子窗体操作符窗体,有以下几种方式: 公共静态变量: 使用共有属性: 使用委托与事件: 通过构造函数把主窗体传递到从窗体中: 一.通过静态变量 特点: ...
- CSS居中的方法整合--水平居中
原文 CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷.是水平居中还是垂直居中?是block还是inline? 居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定. 这里就从这些方 ...
- linux实现nginx按照日期存储日志
通过shell脚本实现+定时任务+nginx信号管理实现日志按日期存储. 1.编写shell脚本,实现日志按日期存储 #!/bin/bash base_path='/home/wwwlogs/' lo ...
- LeetCode 解题报告--202Happy Number
1 题目描述 Write an algorithm to determine if a number is "happy". A happy number is a number ...
- The architecture of LTE network.
3GPP定义的LTE网络架构结构变得扁平化,无线RNC/BSC 消失,只有eNodeB.控制面使用MME进行处理,用户面使用SGW和PGW进行处理.相比GSM和UMTS,在逻辑接口上定义了S1/X2逻 ...