Javascript实现神奇的页面滚动控制

最新推荐文章于 2024-09-11 11:07:15 发布
最新推荐文章于 2024-09-11 11:07:15 发布
阅读量5.8k 收藏 2
点赞数
分类专栏： ASP .NET JavaScript 文章标签： javascript 浏览器 border ie 脚本 图形

 Javascript实现神奇的页面滚动控制

首先，当我移动鼠标到这个指示器上面时，页面就会自动向上滚动，当移动鼠标到指示器下面时，页面就会自动向下滚动。我们不得不感叹新技术带来的神奇！它让我们费了更少的力气，完成同等的工作。但是，是否能在HTML页面上制作这样一个指示器呢？答案当然是：完全可以！请跟我来。

实现思路
 1、首先，准备好2个图形文件，一个代表向上，另一个代表向下。 
 2、然后，进行页面布局，我们可以将这个指示器图标放在你想要的任意位置，这里我们假设它位于当前窗口的右下部。 
 3、针对不同的浏览器，设置好相应的对象变量。这里，我们只考虑当前2种主流浏览器：IE和Netscape。 
 4、对2个指示器图标，分别设置onmouseover与onmouseout事件处理，生成当前操作状态。然后据此执行定时滚动函数，实现页面的滚动效果。

  1. < HTML >
  2.   < HEAD > 
  3.     < META http-equiv=Content-Type content="text/html; charset=gb2312" > 
  4.     < STYLE type=text/css > 
  5.       < !-- 
  6.         /*设置一个样式 
  7.         #item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute } 
  8.       -- > 
  9.     < /STYLE > 
  10.    
  11.     < SCRIPT language=JavaScript > 
  12.       < !--   
  13.         //设置变量 
  14.         //设置变量isNS，判别浏览器类型。对于NetScape浏览器，document.layers返回true值 
  15.         var isNS=(document.layers); 
  16.         //设置引用对象时的变量名称 
  17.         //对于IE浏览器，可见控制的引用值为document.all.object.style.visibility=visible 
  18.         //对于Ns浏览器，可见控制的引用值为document.object.visibility=show 
  19.         var _all=(isNS)? '' : 'all.' ; 
  20.         var _style=(isNS)? '' : '.style' ; 
  21.         var _visible=(isNS)? 'show' : 'visible'; 
  22.    
  23.         //设置其他变量：w_x与w_y：坐标值，okscroll：滚动与否，godown：是否向下 
  24.         var w_x, w_y, item, okscroll=false, godown; 
  25.    
  26.         //初始化运行函数 
  27.         function init()
  28.         {   
  29.           //将引用的对象赋值给item变量，这样，在随后的对象赋值操作中，可以简化代码的编写，并保持兼容性 
  30.           //注意：这是一个非常好的编程习惯 
  31.           item=eval('document.'+_all+'item'+_style); 
  32.           //取得当前窗口的尺寸大小等参数，并移动指示器到屏幕的右下角 
  33.           getwindowsize(); 
  34.    
  35.           //使指示器可见 
  36.           item.visibility=_visible; 
  37.    
  38.           //启动滚动判断定时函数，监测操作动作 
  39.           scrollpage(); 
  40.         } 
  41.    
  42.         //取得当前窗口大小参数，并根据这些数值移动指示器到屏幕右下角 
  43.         //注意：当用鼠标改变窗口的大小时，要根据当前最新的窗口长宽参数设置指示器的位置。否则，就可能看不到停留在 
  44.         //原来位置的指示器了。 
  45.         function getwindowsize()
  46.         {    
  47.           //对于IE，document.body.clientWidth表示当前窗口的宽度，document.body.clientHeight表示高度，单位是 
  48.           //象素px。如果是Ns浏览器，对应为window.innerWidth和window.innerHeight。 
  49.           w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth; 
  50.           w_y=(isNS)? window.innerHeight : document.body.clientHeight; 
  51.    
  52.           //接着，设置代表指示器区域的层的宽度与高度。 
  53.           (isNS)? item.clip.width=42: item.width=42; 
  54.           (isNS)? item.clip.height=20 : item.height=20; 
  55.    
  56.           //根据上面设置的参数，移动指示器到相应位置 
  57.           moveitem(); 
  58.         } 
  59.    
  60.         //移动指示器 
  61.         function moveitem() 
  62.         { 
  63.    
  64.           //对于NS浏览器 
  65.           if (isNS) 
  66.           { 
  67.              item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50)) 
  68.           }
  69.           else
  70.           { 
  71.              //如果是IE，直接给层的2个属性赋值：pixelLeft代表X坐标，pixelTop代表Y坐标 
  72.              //注意：当屏幕发生滚动时，document.body.scrollLeft与document.body.scrollTop分别代表 
  73.              //滚动的横向距离与纵向距离。而w_x与w_y分别表示了指示器在当前窗口的相对坐标位置， 
  74.              //所以，要对2者进行相加操作，从而得到指示器的绝对坐标位置。 
  75.              item.pixelLeft=document.body.scrollLeft+w_x-70; 
  76.              item.pixelTop=w_y+document.body.scrollTop-50; 
  77.           } 
  78.         } 
  79.    
  80.         //对于Ns浏览器，当窗口大小变化时，执行定时操作 
  81.         function resizeNS() 
  82.         { 
  83.            //setTimeout函数设置了定时执行的操作，这里表示：每400毫秒执行document.location.reload()操作 
  84.            setTimeout('document.location.reload()',400); 
  85.         }
  87.         //页面滚动控制函数 
  88.         function scrollpage() 
  89.         {
  90.            status = ''; 
  91.            //okscroll与godown都是滚动状态标志，其值由指示器层的onmouseover与onmouseout2个事件控制。 
  92.            //window.scrollBy(x,y)控制页面滚动，x、y分别表示横向与纵向滚动的距离，单位是象素px。 
  93.            //当设置y值更大时，每次滚动的距离也将更大。 
  94.            if (okscroll) 
  95.            { 
  96.              if (godown)
  97.              { 
  98.                  (isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ; 
  99.              } else { 
  100.                  (isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ; 
  101.              } 
  102.            } 
  103.    
  104.            //页面滚动后，指示器已不再停留在我们期待的位置。所以，要再次执行移动函数移动它到屏幕的右下角。 
  105.            //这样，看起来好像它总是在那里 ;-) 
  106.            moveitem(); 
  107.    
  108.            //设置滚动函数定时执行。这里的时间，表示了监测用户操作状态的周期，越小表示越精确，但程序也将 
  109.            //更“忙”。设置得过于长，就会产生慢动作的延迟效果，好像计算机很迟钝，当我们将鼠标点到向下指示器 
  110.            //时，屏幕并没有马上做出反应，而是等了一段时间，才向下滚动 ;-( 
  111.            //根据你的需要，并进行测试，设置这个数值。 
  112.            setTimeout('scrollpage()', 158); 
  113.         } 
  114.    
  115.         //页面加载后，启动相关脚本函数 
  116.         //设置页面加载后，首先启动init函数 
  117.         window.onload=init; 
  118.    
  119.        //设置当窗口大小发生变换时启动的函数 
  120.        (isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ; 
  121.    
  122.       // End -- > 
  123.     </SCRIPT> 
  124.   </HEAD> 
  125.   < BODY >    
  126.     <!--用div标记定义一个层，从而可以在脚本程序中对它进行控制--> 
  127.     <!--接着，给指示器图像添加2个事件，当它们发生时，分别设置相应的操作状态变量--> 
  128.     < DIV id=item >
  129.        < A onmouseover="okscroll=true; godown=true;" onmouseout=okscroll=false href="javascript:void(0)" >
  130.          < IMG src="http://www.webjx.com/htmldata/2005-06-15/down.gif" border=0 />
  131.       </A>
  132.       <A onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false href="javascript:void(0)" >
  133.         < IMG src="http://www.webjx.com/htmldata/2005-06-15/up.gif" border=0 />
  134.       </A >
  135.     < /DIV > 
  136.     <P> 
  137.        <!--以下是页面内容，写得长一些，从而能看到操作效果--> 
  138.        < CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆ 
  139.          < P >用JavaScript制作页面滚动效果 
  140.          < P >用JavaScript制作页面滚动效果 
  141.          < P >用JavaScript制作页面滚动效果 
  142.          < P >用JavaScript制作页面滚动效果 
  143.          < P >用JavaScript制作页面滚动效果 
  144.          < P >用JavaScript制作页面滚动效果 
  145.          < P >用JavaScript制作页面滚动效果 
  146.          < P >用JavaScript制作页面滚动效果 
  147.          < P >用JavaScript制作页面滚动效果 
  148.          < P >用JavaScript制作页面滚动效果 
  149.          < P >用JavaScript制作页面滚动效果 
  150.          < P >用JavaScript制作页面滚动效果 
  151.          < P >用JavaScript制作页面滚动效果 
  152.          < P >用JavaScript制作页面滚动效果 
  153.          < P >用JavaScript制作页面滚动效果 
  154.          < P >用JavaScript制作页面滚动效果 
  155.          < P >用JavaScript制作页面滚动效果 
  156.          < P >用JavaScript制作页面滚动效果 
  157.          < P >用JavaScript制作页面滚动效果 
  158.          < P >用JavaScript制作页面滚动效果 
  159.          < P >用JavaScript制作页面滚动效果 
  160.          < P >用JavaScript制作页面滚动效果 
  161.          < P >用JavaScript制作页面滚动效果 
  162.          < P >用JavaScript制作页面滚动效果 
  163.          < P >用JavaScript制作页面滚动效果 
  164.          < P >用JavaScript制作页面滚动效果 
  165.          < P >用JavaScript制作页面滚动效果 
  166.          < P >用JavaScript制作页面滚动效果 
  167.          < P >◆◆◆◆◆ End Here ◆◆◆◆◆ 
  168.          < P >
  169.        < /CENTER > 
  170.     </P >
  171.   </BODY >
  172. </HTML > 

（http://www.haohao888.com.cn/wzjs/HTML/4545_6.html）

JS 实现自定义滚动效果
grootbaby
12-11 265
var timer = null; //获得当前滚动盒子scrollBox var ulList = $(".scroll ul.scrollBox"); //获得当前scrollBox里面滚动元素的个数 var ulNum = $(".scroll ul.scrollBox").children("li").length; if (ulNum > 2) { timer = set...
js实现页面自动滚屏效果
12-23
js实现页面自动滚屏效果，可以设置单击，双击，还可以绑定在一个元素上触发
【JavaScript】页面滚动事件详解
最新发布
lph159的博客
09-11 1463
页面滚动事件是浏览器在用户滚动页面时触发的事件。无论是通过鼠标滚轮、键盘上的箭头键，还是触控设备的滑动动作，只要页面内容发生了滚动，就会触发scroll事件。JavaScript 提供了一个简单的方式来监听这个事件，通过window或特定 DOM 元素的方法，我们可以对滚动行为做出反应。console.log('页面正在滚动');});页面滚动事件是 Web 开发中不可或缺的工具，通过它，开发者可以实现丰富的用户交互功能，如回到顶部按钮、无限滚动加载、滚动动画等。
JS滚动页面
qq_54367095的博客
04-05 1142
document.documentElement.scrollTop必须写到函数内。环境对象指的是函数内部特殊的变量this，他代表当前函数运行时所处的环境。当加上属性选择器后，只有有value属性的input会变红。事件对象.target.tagName获取点击的对象。如果将函数A作为参数传递给函数B，则称A为回调函数。得到的数据是数字型 不带单位 可读写。此时两个input中的内容都会变红。自定义属性也可以使用属性选择器。谁调用，this就指向谁。
JS控制滚动条自动向下滚动
01-18
JS 类似BBS控制输入框输入信息后，滚动条自动滚到最下方，始终显示最后输入的一条信息，在做BBS的兄弟，可以参考一下思想
【Jump】 js 控制页面的滚动
qq1154479896的博客
10-22 1547
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jump</title> <style> #box { background-color: pi
使用js控制页面滚动位置的几种方法
热门推荐
HHYZBC的博客
08-20 1万+
Element.scrollIntoView() - Web API 接口参考 | MDN (mozilla.org)Window.scrollTo() - Web API 接口参考 | MDN (mozilla.org)Element.scrollTop - Web API 接口参考 | MDN (mozilla.org)表示让id为idname的元素显示在页面之中，也实现了，有滚动的情况，滚动条会滚动到相应位置。使用scrollTop属性表示将文档元素高度为0.。
javascript实现全屏页面滚动效果.docx
01-13
JavaScript 实现全屏页面滚动效果是一项常见的网页交互技术，它能提供流畅的视觉体验和吸引用户的注意力。在本文中，我们将深入探讨如何使用 JavaScript 来创建这种效果。 首先，全屏页面滚动通常涉及到改变页面...
【JavaScript源代码】javascript实现全屏页面滚动效果.docx
12-29
在本文中，我们将深入探讨如何使用JavaScript实现这样的效果，并分析提供的代码示例。 首先，我们要明白JavaScript是一种解释型的脚本语言，它主要用于增强网页的动态功能。DOM（Document Object Model）是HTML和...
javascript实现蒙版与禁止页面滚动
11-29
总结一下，这个示例展示了如何用JavaScript实现以下功能： 1. 创建一个全屏蒙版，通过CSS设置其样式。 2. 判断用户设备类型，移动端使用`touchmove`事件阻止页面滚动，PC端通过标志变量控制页面滚动。 3. 添加点击...
javascript实现左右控制无缝滚动
10-24
本文将介绍使用JavaScript实现左右控制无缝滚动的方法及提供示例代码。 首先，要实现无缝滚动，需要考虑以下几个关键点： 1. HTML结构：需要有一个容器元素（div），在该容器内部通常是一个ul元素，ul元素内包含多...
用js实现控制内容的向上向下滚动效果
12-11
[removed] iens6=document.all||document.getElementById ns4=document.layers //specify speed of scroll (greater=faster) var speed=10 if (iens6){ [removed](‘<div u00a0id=”container” style>’) document.wr
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
js 控制 div 滚动
oraclhr的专栏
06-05 901
横向 onmouseout="doscroll()"> border=0> border=0> var t=demo.scrollWidth demo1.innerHTML+=demo1.innerHTML function doMarquee() { demo.scrollLeft=demo.scrollLeft} function doscroll() {    sc=s
JS实现网页上的滚动效果
聚合博客室
11-01 1830
        下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚
JavaScript滚动
JeeChang
12-31 2140
这个功能十分简单，暂时把功能做出来。等所有的小功能都出来了。打算把特效库建起来，到时候再来封装。另外。留个扣子：这段代码有2个硬伤，严重影响着效率和可扩展性。大家能指出来嘛？如果看出来了，请留言。我灰常希望能结交您这样的朋友。JavaScript滚动
JS 滚动条控制
weixin_45456477的博客
07-20 1164
缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖。当产生滚动条的元素不是windows元素时,window.scrollTo就会失效。优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑。此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素。缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题。缺点：需要知道产生滚动条的元素，否则无法生效。优点：代码简单，可靠性高。缺点：不能指定偏移量。
JS控制滚动条滚动
m0_62758542的博客
11-28 695
JS控制滚动条滚动
js控制滚动条滚动
前端程序猿的博客
03-31 6767
JavaScript 可以通过操作scrollTop在上面的示例中，首先通过获取需要滚动的元素，然后设置scrollTop属性为需要滚动到的位置，即可实现控制滚动条滚动。如果需要平滑滚动，可以使用在上面的示例中，首先获取需要滚动的元素和目标位置，然后设置动画的持续时间。在scrollTo函数中，通过计算当前进度和位置，来实现平滑的滚动效果。在滚动动画未完成时，调用方法来继续滚动，直到动画完成为止。
JavaScript实现滚动加载页面图片功能
资源摘要信息: "本文档介绍了如何使用JavaScript实现一个滚动加载页面图片的功能，并提供了相关的源码。具体来说，文档详细阐述了利用JavaScript对网页进行图片懒加载的技术，即当用户在浏览网页时，图片会在滚动到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值