JS实现网页上随滚动条滚动的层效果代码_javascript技巧

头

我们提供各类编程源码、
素材、书籍教程、设计模板、
网页特效代码以及常用软件下载等，
做有质量的
学习型源码下载站。



















































































































底

关闭

返回顶部


var Bianyuan = {
 //添加事件2(DOM-保证this指向对象是obj)
 addEvent : function(obj, type, fn){
 if (obj.attachEvent){
 obj['e'+type+fn] = fn;
 obj[type+fn] = function(){obj['e'+type+fn](window.event);}
 obj.attachEvent('on'+type, obj[type+fn]);
 }else{
 obj.addEventListener(type, fn, false);
 }
 },
 //获取id元素
 $ : function(id){
 return document.getElementById(id);
 },
 //取得浏览器可视区size
 getBrowserSize : function(){
 var pageWidth = window.innerWidth,
 pageHeight = window.innerHeight;
 if (typeof pageWidth != "number"){
 if (document.compatMode == "CSS1Compat"){
 pageWidth = document.documentElement.clientWidth;
 pageHeight = document.documentElement.clientHeight;
 } else{
 pageWidth = document.body.clientWidth;
 pageWidth = document.body.clientHeight;
 }
 }
 //ie减去17滚动条宽度
 if(!window.ActiveXObject){
 pageWidth -= 17;
 }
 return {
 width : pageWidth,
 height : pageHeight
 }
 },
 //获取滚动条高度
 getPageScroll : function(){ 
 var yScroll; 
 if (self.pageYOffset) { 
 yScroll = self.pageYOffset; 
 } else if (document.documentElement && document.documentElement.scrollTop){ 
 yScroll = document.documentElement.scrollTop; 
 } else if (document.body) { 
 yScroll = document.body.scrollTop; 
 } 
 return yScroll; 
 }
}
function scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o){
 //滚动框宽高
 var scrollBar = Bianyuan.$(scrollId),
 barWidth = scrollBar.offsetWidth,
 barHeight = scrollBar.offsetHeight;
 //可视区宽高
 var pageWidth = Bianyuan.getBrowserSize().width,
 pageHeight = Bianyuan.getBrowserSize().height;
 //内容宽高
 var widthMore = document.documentElement.scrollWidth,
 heightMore = document.body.scrollHeight||(document.documentElement.scrollHeight); 
 //最大宽高
 var maxWidth = Math.max(pageWidth, widthMore),
 maxHeight = Math.max(pageHeight, heightMore);
 scrollBar.style.position = 'absolute';
 //设置top--假设滚动框高度小于整个页面高度，如果大于直接将其隐藏
 if (maxHeight < (barHeight + footHeight + footHeight + 4)){
 scrollBar.style.display = 'none';
 }else{
 //不挡顶部---如果想改距顶高度，改下边的第一个2值
 scrollBar.style.top = Bianyuan.getPageScroll() + headHeight + 2 + 'px';
 //不挡底部
 if ((heightMore - Bianyuan.getPageScroll() - barHeight) <= footHeight){
 scrollBar.style.top = heightMore - footHeight - barHeight - 2 + 'px';
 }
 }
 //无视主体内容-左右
 if (dir == 'left' && areaWidth == 1){
 scrollBar.style.left = 2 + 'px';
 }else if (dir == 'right' && areaWidth == 1){
 scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
 //根据主体内容宽-左右
 }else if (dir == 'left' && areaWidth != 1){
 if (pageWidth >= (barWidth*2 + areaWidth + 4)){
 scrollBar.style.left = (pageWidth - areaWidth)/2 - barWidth - 2 + 'px';
 }else{
 scrollBar.style.left = 2 + 'px';
 }
 }else if (dir == 'right' && areaWidth != 1){
 if (pageWidth >= (barWidth*2 + areaWidth + 4)){
 scrollBar.style.left = (pageWidth - areaWidth)/2 + areaWidth + 2 + 'px';
 }else{
 scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
 }
 }
 //关闭和返回顶部
 if (o){
 if (o.btnClose){
 var closeBtn = Bianyuan.$(o.btnClose);
 Bianyuan.addEvent(closeBtn, 'click', function(){
 scrollBar.style.display = 'none';
 })
 }
 if (o.goTop){
 var gotopBtn = Bianyuan.$(o.goTop);
 Bianyuan.addEvent(gotopBtn, 'click', function(){
 document.documentElement.scrollTop = 0;
 document.body.scrollTop = 0;
 })
 }
 }
 //改变窗口大小或滚动条滚动
 resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o);
}
function resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o){
 window.onresize = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}
 window.onscroll = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}
}