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 ...
随机推荐
- CodeSmith Template Model Output
背景:上学那会儿就接触CodeSmith,是一款非常优秀的代码自动生成工具.以前写过好些基本模版,可惜早不知道扔到哪儿去了,如今只能重新开始,把它捡回来,加油. 效果:将数据库 DataBase 应用 ...
- 如何把网站及数据库部署到Windows Azure
http://edi.wang/Post/2014/1/1/deploying-website-with-db-to-azure-custom-domain
- TIMAC 学习笔记（二）
昨天大体上熟悉了TIMAC自带的CC2530的示范例程,今天先从演示抓包入手,分析四种不同的配置工程在空中传输的差异.随后,会按照扫描.组网.入网等MAC层接口函数入手,结合IEEE 802.15.4 ...
- 一个封装好的C++比特数组BitArray，可以对位进行直接操作
本来仅仅只是用来做哈夫曼实验时的辅助,后来一想干脆封装好,省得以后又要用到比特位的操作. 基本用法示例: BitArray bits; bits[] = ; bits[] = ; cout<& ...
- Sicily 1068欢迎提出优化方案
1608. Digit Counting 限制条件 时间限制: 1 秒, 内存限制: 32 兆 题目描述 Trung is bored with his mathematics homeworks. ...
- Unix 进程通信基本概念
一:通信分为两类: 控制信息的传递: 低级通信 大批量数据的传递: 高级通信 二:基本的通信方式 (a)主从式通信: 通信的双方存在一种隶属关系, 其中主进程是通信过程的控制者,而从进程是通信过程的从 ...
- TweenMax动画库学习(一)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- 获取json对象长度的问题
平时,我们获取一些字符串或数组的长度的时候会使用length,例如: var str ="asdasd" console.log(str.length) //输出6 var arr ...
- QT定制有标题的扁平化下拉框控件
关键字:QT,QComboBox,QLineEdit,QListView,QPushButton,QMenu,QWidgetAction,setStyleSheet OS:Windows 7 方法一: ...
- hdu 4641 K-string SAM的O(n^2)算法 以及 SAM+并查集优化
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4641 题意:有一个长度为n(n < 5e4)的字符串,Q(Q<=2e5)次操作:操作分为:在末 ...