JS实现网页上随滚动条滚动的层效果代码
转载 &更新时间：日 09:59:19 & 作者：企鹅
这篇文章主要介绍了JS实现网页上随滚动条滚动的层效果代码,涉及JavaScript页面元素属性的获取、运算及设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&随滚动条滚动的层&/title&
body{ margin:0; padding:0; font-size:12 font-family:"宋体",Arial, Helvetica, sans-}
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:}
img{ border:0;}
ol,ul{list-style:}
a{ text-decoration: color:#}
a:hover{ text-decoration:}
#scroll_div{ width:100 height:400 background:#990; }
#btn_close,#btn_gotop{ cursor:}
&div style=" width:1002height:42margin:0 background-color:#060;"&头&/div&
&div style="width:1002 margin:0 background-color:#f60;"&
我们提供各类编程源码、&br&素材、书籍教程、设计模板、&br&网页特效代码以及常用软件下载等，&br&做有质量的&br&学习型源码下载站。
&div style=" width:1002height:95margin:0 background-color:#060;"&底&/div&
&div id="scroll_div"&
&span id="btn_close"&关闭&/span&&br /&
&span id="btn_gotop"&返回顶部&/span&
&script type="text/javascript"&
var Bianyuan = {
//添加事件2(DOM-保证this指向对象是obj)
addEvent : function(obj, type, fn){
if (obj.attachEvent){
obj['e'+type+fn] =
obj[type+fn] = function(){obj['e'+type+fn](window.event);}
obj.attachEvent('on'+type, obj[type+fn]);
obj.addEventListener(type, fn, false);
//获取id元素
$ : function(id){
return document.getElementById(id);
//取得浏览器可视区size
getBrowserSize : function(){
var pageWidth = window.innerWidth,
pageHeight = window.innerH
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientW
pageHeight = document.documentElement.clientH
pageWidth = document.body.clientW
pageWidth = document.body.clientH
//ie减去17滚动条宽度
if(!window.ActiveXObject){
pageWidth -= 17;
width : pageWidth,
height : pageHeight
//获取滚动条高度
getPageScroll : function(){
if (self.pageYOffset) {
yScroll = self.pageYO
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollT
} else if (document.body) {
yScroll = document.body.scrollT
function scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o){
//滚动框宽高
var scrollBar = Bianyuan.$(scrollId),
barWidth = scrollBar.offsetWidth,
barHeight = scrollBar.offsetH
//可视区宽高
var pageWidth = Bianyuan.getBrowserSize().width,
pageHeight = Bianyuan.getBrowserSize().
//内容宽高
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';
//不挡顶部---如果想改距顶高度，改下边的第一个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';
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';
scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
//关闭和返回顶部
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 type="text/javascript"&
scrollBar("scroll_div", "right", 42, 95, 1002, {btnClose:"btn_close",goTop:"btn_gotop"});
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具机子进入滚动条的时候蓝屏了怎么处理
按时间排序
开机蓝屏，如果这是偶然的话，（引用请说明作者：力王历史）一般重启电脑，便可恢复正常，对系统没什么影响！如果重启电脑后，进不去系统，可以强行关机再重启一次，如果还是进不去，说明系统文件丢失了！或者系统内存有很严重的错误了，试试开机，出完电脑品牌后，按F8，回车，回车，进安全模式里，最后一次正确配置，按下去试试！或者，进安全模式，到桌面后，全盘杀毒！或者拔下显卡和内存条，橡皮擦擦，再用毛刷，清理插槽灰尘，更换插槽等！再开机，如果还是不行，需要“一键还原”或“重装系统”了！
你从做个系统
原来的系统盘别用
系统问题吧盗版的系统经常缺少文件而导致不正常现象再装次系统吧
这种情况一般是系统核心文件损坏造成的，比如用系统清理工具过度清理或者病毒破坏，建议重装
尊敬的用户，您好。建议更新显示卡驱动测试，没有效果及时送到服务站检测。为您提供驱动下载链接：为您提供维修网点查询链接：祝您生活愉快。
这个kxescore就是金山的，蓝屏后的代码是什么？截个屏过来看看。估计是不兼容吧。
不是什么老主板，从815T级别就支持U盘引导了，只是兼容性稍差。蓝屏，先检查内存，用橡皮清理内存条金手指，再装回，多插拔几次。硬盘也插拔数据线和电源线。
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：JavaScript中关于iframe滚动条的去除和保留
转载 &更新时间：日 09:00:29 & 作者：yezi-dream
在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面小编通过本文给大家详细介绍下，对js iframe滚动条相关知识感兴趣的朋友一起学习吧
在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？
&& 一：去掉全部的滚动条
&&&&&&&& 第一个方法：&& iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。
&&&&&&&&&&&&&&&&&&&&&&&&&&&& scrolling : auto -----在需要的时候滚动条出现
&&&&&&&&&&&&&&&&&&&&&&&&&&&& scrolling : yes ------始终显示滚动条
&&&&&&&&&&&&&&&&&&&&&&&&&&&& scrolling : no -------始终隐藏滚动条
&&&&&&&&&&&&&&&&&&&&&&&&&&&& 当设置&& scrolling : no 时，全部的滚动条就没有了。
&&&&&&&& 第二个方法：我发现除了 scrolling 可以去掉全部的滚动条外，还有另一个方法，在嵌入的页面里设置 body{overflow：hidden}，这样也可以将滚动条去掉，而且这也是当我们只想去掉某一个滚动条所使用的属性。
& 二：去掉右边的滚动条且保留底下的滚动条
&&&&&& 如果只想保留底下的滚动条，那么可以在嵌入的页面里设置 body{overflow-x： overflow-y：hidden；}
& 三：去掉底下的滚动条且保留右边的滚动条
&&&&& 在嵌入的页面里设置 body{overflow-x：hidden；overflow-y：auto；}
&&&&& 我们已经知道了这两个属性都可以设置滚动条的显示和隐藏，那么当两个同时设置时，会出现哪个效果呢？
&&&&& 通过检测，我发现当 scrolling = " auto "& 或者 " yes " 时，如果设置了 body，那么就会使用body里的设置；当 scrolling = " no " 时，不管body设置了什么，都会使用 scrolling 的设置，即全部的滚动条都被去掉了。
以上所述是小编给大家介绍的JavaScript中关于iframe滚动条的去除和保留的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具让页面上两个div中的滚动条(滑块)同步运动示例
转载 &更新时间：日 16:59:17 & 作者：
如何想让页面上两个div中的滚动条(滑块)同步运动该怎实现，具体代码如下，感兴趣的朋友可以参考下
使用JQuery添加如下代码
代码如下: $('#sourceDiv').scroll( function() { $('#targetDiv').scrollTop($(this).scrollTop()); $('#targetDiv').scrollLeft($(this).scrollLeft()); }); $('#targetDiv').scroll( function() { $('#sourceDiv').scrollTop($(this).scrollTop()); $('#sourceDiv').scrollLeft($(this).scrollLeft()); });
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Excel中在拉动竖的滚动条时,想要固定的某几行不动,应该怎样做?
按时间排序
一般情况都只可以用冻结窗格来实现的，比如你想1、2、3行不动，把光标放在第4行，然后点窗口－－冻结窗格就行了；如果你想要A、B、C列不动，把光标放在1栏的D列中，点点窗口－－冻结窗格；如果想要1、2、3栏和A、B、C列不动，则把光标放在4栏的D列不动，点窗口－－冻结窗格就好了。希望我的回答能给你予帮助，也希望能加点分，谢谢！
两种方法（都在窗口下的工具栏内）一冻结窗口二拆分窗口都可以有所根据自己的不同数据量选择使用方式
在菜单栏上的，窗口--冻结窗口就好了
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：}