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 ...
随机推荐
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- 使用httpclient发送post请求与get请求
最近因为项目的要求,需要使用httpclient来发送请求.但是查阅了许多博客,大家发送请求的方法各不相同.原因是因为httpclient的jar包的不同版本,其内部方法也不相同.因此抛开具体用到的j ...
- Linux学习之路一计算机是如何工作的
初次接触MOOC课堂,里面有个很牛X的老师教Linux,恰好自己有兴趣学,顾有了此系列学习博文. 第一讲 计算机是如何工作的 学习Linux,涉及到了C语言和汇编以及操作系统的知识,顾第一讲要讲讲 ...
- 上传图片（基于zepto.js）
效果如下: <div class="otherPic"> <div id="showOtherImage"></div> & ...
- android SDK Manager更新不了,出现错误提示："Failed to fetch URL..."!
可以用以下办法解决: 使用SDK Manager更新时出现问题 Failed to fetch URL https://dl-ssl.google.com/android/repository/rep ...
- JSON C＃ Class Generator ---由json字符串生成C＃实体类的工具
json作为互联网上轻量便捷的数据传输格式,越来越受到重视.但在服务器端编程过程中,我们常常希望能通过智能提示来提高编码效率.JSON C# Class Generator 能将json格式所表示的J ...
- 操作xml文档的常用方式
1.操作XML文档的两种常用方式: 1)使用XmlReader类和XmlWriter类操作 XmlReader是基于数据流的,占用极少的内存,是只读方式的,所以速度极快.只能采用遍历的模式查找数据节点 ...
- SharedPreference 的存取
1.通过名称来获取指定的SharedPreferences,下面这句代码表示获取名字问hello的SharedPreferences,数据保存在 data/data/package名/shared_p ...
- php连接ftp
PHP连接ftp,发现一个很好用的类库phpseclib.英文原文 Connecting to SFTP with PHP If you need to connect to SFTP using P ...
- Python时间和日期学习
#coding=utf-8 __author__ = 'Administrator' #日期和时间模块学习 """ Python程序能用很多方式处理日期和时间,转换日期格 ...