返回顶部/两侧广告效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>返回顶部/两侧广告效果</title> <style> .main{height:12000px; width:30px; background: orange; margin-left:90%;} .main a{ padding:10px;} #toTop{ position:fixed; bottom:30px;; right:20px; border:1px solid orange; background:blue; width:100px; height:100px; line-height:100px; text-align:center;} #toTop2{ position:fixed; bottom:30px;; left:20px; border:1px solid orange; background:blue; width:100px; height:100px; line-height:100px; text-align:center;} </style> </head> <body> <div class="main"> <?php $map = array(0=>'O',1=>'A', 2=>'B', 3=>'C', 4=>'D', 5=>'E'); for($i=0;$i<501;$i++) { $b = $i; $style = ''; if($i%100 == 0) { $style = 'style="background:#F00; margin-left:30px;"'; $c = $i/100; $b = $map[$c]; } echo '<a id="target_'.$b.'" '.$style.' href="javascript:void(0);" onclick="centerWindow(\'http://www.baidu.com\', 350, 350)">'.$b.'</a>'; echo "<br/>"; } ?> </div> <div id="toTop" style=""><a onclick="javascript:goTo(0, 300);return false;" target="_self" style="color:white;" href="#">返回顶部</a></div> <div id="toTop2" style=""><a onclick="javascript:goTo(0, 300);return false;" target="_self" style="color:white;" href="#">返回顶部</a></div> </body> </html> <script> var FBrowser = (function () { var ua = navigator.userAgent; var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]'; return { isIE : !!window.attachEvent && !isOpera, isOpera : isOpera, isSafari : ua.indexOf('AppleWebKit/') > -1, isFirefox : ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1, MobileSafari : /Apple.*Mobile.*Safari/.test(ua), isChrome : !!window.chrome }; })(); FBrowser.isIE6 = FBrowser.isIE && !window.XMLHttpRequest; FBrowser.isIE7 = FBrowser.isIE && !!window.XMLHttpRequest; function $(v) { return document.getElementById(v) } //获取滚动条所在的位置 function FgetScrollPosition() { if (FBrowser.isIE6) return { left : document.body.scrollLeft, top : document.body.scrollTop || document.documentElement.scrollTop }; if (document.documentElement) { return { left : document.documentElement.scrollLeft, top : document.body.scrollTop || document.documentElement.scrollTop }; } else return { left : document.body.scrollLeft, top : document.body.scrollTop }; } //获取样式中定义的css值 function getRealStyle(o,name) { if (window.getComputedStyle) { var style=window.getComputedStyle(o,null); return style.getPropertyValue(name); } else { var style=o.currentStyle; name=camelize(name); if (name=="float") name="styleFloat"; return style[name]; } } function camelize(s) {//将CSS属性名转换成驼峰式 return s.replace(/-[a-z]/gi,function (c) { return c.charAt(1).toUpperCase(); }); } //main 函数 function sideBar(id, defaultScrollHeight) { if(typeof id != 'string' || !$(id)) { alert('请传入有效的id'); return ; } //绑定toTop的scroll事件 function toTop() { var toTop_icon = $(id); var scrollPosition = FgetScrollPosition(); if (scrollPosition.top > defaultScrollHeight) { toTop_icon.style.display = 'block'; toTop_icon.style.position = 'fixed'; } else { toTop_icon.style.display = 'none'; } } //非IE浏览器下 if (document.addEventListener) { window.addEventListener("load", toTop, true); window.addEventListener("resize", toTop, true); window.addEventListener("scroll", toTop, true); }; //ie8 ie7 if (FBrowser.isIE7) { window.attachEvent("onload", toTop); window.attachEvent("onresize", toTop); window.attachEvent("onscroll", toTop); }; function fixedElement() { var toTopHeight = $(id).offsetHeight;//元素自身高度 var toTopCssbottom = getRealStyle($(id), 'bottom'); //居中效果 //var height=document.documentElement.scrollTop+document.documentElement.clientHeight/2 +"px"; var height = (document.documentElement.scrollTop + document.documentElement.clientHeight-toTopHeight-parseInt(toTopCssbottom)) + "px"; if (FgetScrollPosition().top > defaultScrollHeight) { $(id).style.display = 'block'; } else { $(id).style.display = 'none'; } $(id).style.top = height; $(id).style.position = 'absolute'; }; if (FBrowser.isIE6) { window.attachEvent("onload", function(){ setTimeout(function(){ fixedElement(); },400); }); window.attachEvent("onresize", fixedElement); window.attachEvent("onscroll", fixedElement); }; } /********************动画效果***********************/ function goTo(scrollTop, dur) { /* 参数说明 o:要动画的对象 end:元素最终的样式 dur:动画持续多长时 fx:效果插件 */ function animateScroll(end, dur, fx) { var curTime=0; var scrollTop = FgetScrollPosition().top; var t=setInterval(function () { if (curTime>=dur) clearTimeout(t); document.body.scrollTop = document.documentElement.scrollTop = fx(scrollTop, end - scrollTop, curTime,dur); curTime+=13; //jquery 中也为 13 },13); } function easeOut(start,alter,curTime,dur) { var progress =curTime/dur; return start-(Math.pow(progress,2)-2*progress)*alter; } animateScroll(scrollTop, dur, easeOut); } /********************动画效果***********************/ sideBar('toTop', 400); sideBar('toTop2', 400); </script>
效果图：
