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>