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


Posted in Javascript onNovember 04, 2015

本文实例讲述了JS实现网页上随滚动条滚动的层效果代码。分享给大家供大家参考,具体如下:

这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧。

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>随滚动条滚动的层</title>
<style>
body{ margin:0; padding:0; font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,form{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ border:0;}
ol,ul{list-style:none;}
a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:none;}
#scroll_div{ width:100px; height:400px; background:#990; }
#btn_close,#btn_gotop{ cursor:pointer;}
</style>
</head>
<body>
<div style=" width:1002px;height:42px;margin:0 auto; background-color:#060;">头</div>
<div style="width:1002px; margin:0 auto; background-color:#f60;">
我们提供各类编程源码、<br>素材、书籍教程、设计模板、<br>网页特效代码以及常用软件下载等,<br>做有质量的<br>学习型源码下载站。
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div style=" width:1002px;height:95px;margin:0 auto; background-color:#060;">底</div>
<div id="scroll_div">
<span id="btn_close">关闭</span><br />
<span id="btn_gotop">返回顶部</span>
</div>
<script type="text/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);}
}
</script>
<script type="text/javascript">
scrollBar("scroll_div", "right", 42, 95, 1002, {btnClose:"btn_close",goTop:"btn_gotop"});
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
何时使用Map来代替普通的JS对象
Apr 29 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php 启动报错如何解决
2014/01/17 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python障碍式期权定价公式
2019/07/19 Python
django form和field具体方法和属性说明
2020/07/09 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
Python 图片处理库exifread详解
2021/02/25 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
学期自我评价
2014/01/27 职场文书
揠苗助长教学反思
2014/02/04 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
施工协议书范本
2014/04/22 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
长江三峡导游词
2015/01/31 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
导游词之湖北武当山
2019/09/23 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Redis实现一个账号只能登录一个设备
2022/04/19 Redis