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 ...
随机推荐
- 第四十六篇、UICollectionView广告轮播控件
这是利用人的视觉错觉来实现无限轮播,UICollectionView 有很好的重用机制,这只是部分核心代码,后期还要继续完善和代码重构. #import <UIKit/UIKit.h> # ...
- iOS - 基于蓝牙数据交换的环境监测(温度、湿度、光照、粉尘、噪声)
一.蓝牙外设的数据接收 二.App端显示获取数据
- MSSQL 数字钱转化为大写
--说明: --1.本函数范围从 毫 ~ 兆 --2.有四种精度(元,角 ,分,厘 ,毫) --3.有三种进位规则(四舍五入,接舍去,非0就入) --参数说明:dbo.MoneyToCapital( ...
- dispatch_async & dispatch_sync
Clear that! dispatch_async 是将block发送到指定线程去执行,当前线程不会等待,会继续向下执行. dispatch_sync 也是将block发送到指定的线程去执行,但是当 ...
- JavaScript学习笔记-数组（1）
数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型.数 ...
- Redis配置中文翻译,3.2.1版
大部分常见设置都翻译了,还有一些是从网上复制的(懒) # Redis configuration file example. ## Redis配置文件示例 # # Note that in order ...
- 在.NET连接MySQL以及封装好的MySQLHelper.cs
1.首先上MySQL网站下驱动:http://www.mysql.com/products/connector/ 2.安装下载的安装包 3.我们在Visual Studio里创建一个Web Appli ...
- MongoDB在windows下安装配置
MongoDB的官网是:http://www.mongodb.org/ MongoDB最新版本下载在官网的DownLoad菜单下:http://www.mongodb.org/downloads 本人 ...
- 代码动态创建checkbox
根据数据库的内容动态创建Checkbox控件并显示在Panel上 dataset ds=new dataset(); CheckBox[ ] cb=new CheckBox[ds.tables[0]. ...
- IO笔记
Java流操作有关的类或接口: Java流类图结构: 1.文件操作时,注意要使用File.separator来代替/分隔符实现跨平台 2.RandomAccessFile类并不是流体系中的一员,但常用 ...