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 ...
随机推荐
- int/double/string使用
在计算机中存储数据和儿童在抽屉中存放物品很类似. 例如: 要在计算机中存一个数字50,需要两句话. int a; //将要放的物品告诉家长 a=50; //将物品放到某个抽屉中 计算机存储变量的过 ...
- PHP自定义日期英文格式 Feb 11,2015
背景:[PHP小工具]项目中,经常会要求多版本语言支持,而日期也是必不可少的组成元素. 英文日期书写顺序分英式和美式,举例如. 美国:月日年(January 8th,2014 或 January 8, ...
- PHP中常量
PHP中常量 常量就是一种特殊的变量,PHP中的常量值一旦定义,在程序运行过程中不可更改,常量本身也不允许删除. 程序是用于解决现实问题,由两部分组成:代码,数据 常量的定义: 语法1: define ...
- UVaLive 3708
题意:周长为10000的圆上等距分布n个雕塑,求再加入m个雕塑后,为使所有雕塑等距分布所需移动原来n个雕塑的最小总距离. 分析:计算相对距离. #include<cstdio> #incl ...
- ZigBee 入网详解
本文将根据Sniffer来详细解释ZigBee终端设备入网的整个流程,原创博文. 当协调器建立好网络后,终端设备执行zb_startrequest函数,准备入网时,他们两者之间详细的流程如下.
- Ubuntu 截屏
一个图说明: 系统设置->键盘->快捷键->屏幕截图 里面可以查看及修改快捷键
- document.compatMode的CSS1compat
document.compatMode BackCompat:标准兼容模式关闭.浏览器宽度:document.body.clientWidth: CSS1Compat:标准兼容模式开启. 浏览器宽度: ...
- 打破常规——大胆尝试在路由器上搭建SVN服务器
注册博客园挺久了,一直比较懒,虽然有几次想写点文章,但是一直没有行动,今天给大家带来一篇比较有意思的文章,不涉及技术上的,希望大家轻拍.本文的文字和图片全部为原创,尊重作者转载请注明出处! 说起路由器 ...
- 一个不错的图片滑动展示插件 anythingslider
一个不错的图片http://css-tricks.com/anythingslider-jquery-plugin/ DEMO演示: http://css-tricks.github.io/Anyth ...
- java之StringBuffer
StringBuffer就是字符串缓冲区,用于存储数据的容器. 特点:长度可变,可存储不同类型的数据,最终转化成字符串使用,可以对字符串修改 功能: 添加:append(value), insert( ...