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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
详解Angular模板引用变量及其作用域
Nov 23 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python中的ctime()方法使用教程
2015/05/22 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
软件项目实施计划书
2014/05/02 职场文书
学术诚信承诺书
2014/05/26 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2014企业年终工作总结
2014/12/23 职场文书