分享
 
 
 

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

王朝html/css/js·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

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

实现思路

1、首先,准备好2个图形文件,一个代表向上,另一个代表向下。

2、然后,进行页面布局,我们可以将这个指示器图标放在你想要的任意位置,这里我们假设它位于当前窗口的右下部。

3、针对不同的浏览器,设置好相应的对象变量。这里,我们只考虑当前2种主流浏览器:IE和Netscape。

4、对2个指示器图标,分别设置onmouseover与onmouseout事件处理,生成当前操作状态。然后据此执行定时滚动函数,实现页面的滚动效果。

代码详解

< HTML >< HEAD >

< META http-equiv=Content-Type content="text/html; charset=gb2312" >

< STYLE type=text/css >

< !--

/*设置一个样式

#item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute }

-- >

< /STYLE >

< SCRIPT language=JavaScript >

< !--

//设置变量

//设置变量isNS,判别浏览器类型。对于NetScape浏览器,document.layers返回true值

var isNS=(document.layers);

//设置引用对象时的变量名称

//对于IE浏览器,可见控制的引用值为document.all.object.style.visibility=visible

//对于Ns浏览器,可见控制的引用值为document.object.visibility=show

var _all=(isNS)? '' : 'all.' ;

var _style=(isNS)? '' : '.style' ;

var _visible=(isNS)? 'show' : 'visible';

//设置其他变量:w_x与w_y:坐标值,okscroll:滚动与否,godown:是否向下

var w_x, w_y, item, okscroll=false, godown;

function init(){

//初始化运行函数

//将引用的对象赋值给item变量,这样,在随后的对象赋值操作中,可以简化代码的编写,并保持兼容性

//注意:这是一个非常好的编程习惯

item=eval('document.'+_all+'item'+_style);

//取得当前窗口的尺寸大小等参数,并移动指示器到屏幕的右下角

getwindowsize();

//使指示器可见

item.visibility=_visible;

//启动滚动判断定时函数,监测操作动作

scrollpage();

}

function getwindowsize() {

//取得当前窗口大小参数,并根据这些数值移动指示器到屏幕右下角

//注意:当用鼠标改变窗口的大小时,要根据当前最新的窗口长宽参数设置指示器的位置。否则,就可能看不到停留在

//原来位置的指示器了。

//对于IE,document.body.clientWidth表示当前窗口的宽度,document.body.clientHeight表示高度,单位是

//象素px。如果是Ns浏览器,对应为window.innerWidth和window.innerHeight。

w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;

w_y=(isNS)? window.innerHeight : document.body.clientHeight;

//接着,设置代表指示器区域的层的宽度与高度。

(isNS)? item.clip.width=42: item.width=42;

(isNS)? item.clip.height=20 : item.height=20;

//根据上面设置的参数,移动指示器到相应位置

moveitem();

}

function moveitem() {

//移动指示器

//对于NS浏览器

if (isNS) {

item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))

}else{

//如果是IE,直接给层的2个属性赋值:pixelLeft代表X坐标,pixelTop代表Y坐标

//注意:当屏幕发生滚动时,document.body.scrollLeft与document.body.scrollTop分别代表

//滚动的横向距离与纵向距离。而w_x与w_y分别表示了指示器在当前窗口的相对坐标位置,

//所以,要对2者进行相加操作,从而得到指示器的绝对坐标位置。

item.pixelLeft=document.body.scrollLeft+w_x-70;

item.pixelTop=w_y+document.body.scrollTop-50;

}

}

function resizeNS() {

//对于Ns浏览器,当窗口大小变化时,执行定时操作

//setTimeout函数设置了定时执行的操作,这里表示:每400毫秒执行document.location.reload()操作

setTimeout('document.location.reload()',400);

}

function scrollpage() {

//页面滚动控制函数

status = '';

//okscroll与godown都是滚动状态标志,其值由指示器层的onmouseover与onmouseout2个事件控制。

//window.scrollBy(x,y)控制页面滚动,x、y分别表示横向与纵向滚动的距离,单位是象素px。

//当设置y值更大时,每次滚动的距离也将更大。

if (okscroll) {

if (godown) {

(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;

} else {

(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;

}

}

//页面滚动后,指示器已不再停留在我们期待的位置。所以,要再次执行移动函数移动它到屏幕的右下角。

//这样,看起来好像它总是在那里 ;-)

moveitem();

//设置滚动函数定时执行。这里的时间,表示了监测用户操作状态的周期,越小表示越精确,但程序也将

//更“忙”。设置得过于长,就会产生慢动作的延迟效果,好像计算机很迟钝,当我们将鼠标点到向下指示器

//时,屏幕并没有马上做出反应,而是等了一段时间,才向下滚动 ;-(

//根据你的需要,并进行测试,设置这个数值。

setTimeout('scrollpage()', 158);

}

//页面加载后,启动相关脚本函数

//设置页面加载后,首先启动init函数

window.onload=init;

//设置当窗口大小发生变换时启动的函数

(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;

// End -- >

< /SCRIPT >

< BODY >

<!--用div标记定义一个层,从而可以在脚本程序中对它进行控制-->

<!--接着,给指示器图像添加2个事件,当它们发生时,分别设置相应的操作状态变量-->

< DIV id=item >< A onmouseover="okscroll=true; godown=true;"

onmouseout=okscroll=false href="javascript:void(0)" >< IMG

src="down.gif" border=0 >< /A >< A

onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false

href="javascript:void(0)" >< IMG src="up.gif" border=0 >< /A > < /DIV >

< P >

<!--以下是页面内容,写得长一些,从而能看到操作效果-->

< CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >用JavaScript制作页面滚动效果

< P >◆◆◆◆◆ End Here ◆◆◆◆◆

< P >< /CENTER >

< P >< /P >< /BODY >< /HTML >

演示效果

OK!看了上面的代码详细解读,你是否领会了其中的技巧?软件真是无所不能,是吗?

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有