JavaScript implements Magical page scrolling control

Javascript| Control | page

First, when I move the mouse over this indicator, the page scrolls up automatically, and the page scrolls down automatically when you move the mouse to the indicator. We have to lament the magic of the new technology! It takes us less effort to do the same work. But is it possible to make such an indicator on an HTML page? The answer, of course, is: absolutely OK! Come with me, please.

Realize the idea

1, first of all, prepare 2 graphics files, one represents up, and the other represents downward.

2, and then, for the page layout, we can put this indicator icon in any position you want, and here we assume it is in the right lower part of the current window.

3, for different browsers, set the corresponding object variables. Here, we only consider the current 2 main browsers: IE and Netscape.

4, to 2 indicator icons, respectively set onmouseover and onmouseout event processing, generate the current operation status. Then the timing scrolling function is implemented to realize the scrolling effect of the page.

Code detailed

< HTML >< head >
< META http-equiv=content-type content= "text/html; charset=gb2312 ">
< STYLE type=text/css >
<!--
/* Set a style
#item {left:0px; Visibility:hidden; Position:absolute}
-->
</style >

< SCRIPT language=javascript >
<!--

Setting variables
Sets the variable iSNS to identify the browser type. For Netscape browsers, Document.layers returns a true value
var isns= (document.layers);
To set the name of a variable when referencing an object
For IE browsers, the reference value for the visible control is document.all.object.style.visibility=visible
For NS browsers, the reference value for the visible control is Document.object.visibility=show
var _all= (IsNS)? ': ' All. '
var _style= (IsNS)? ': '. Style ';
var _visible= (IsNS)? ' Show ': ' Visible ';

Set other variables: w_x and w_y: Coordinate values, Okscroll: Scrolling or not, Godown: whether down
var w_x, w_y, item, Okscroll=false, Godown;

function init () {
Initializing the Run function

Assign the referenced object to the item variable so that, in subsequent object assignment operations, you can simplify code writing and maintain compatibility
Note: This is a very good programming habit
Item=eval (' document. ') +_all+ ' item ' +_style);
Gets the size of the current window, and so on, and moves the indicator to the lower-right corner of the screen
Getwindowsize ();

Make indicator visible
item.visibility=_visible;

Start rolling Judgment timer function, monitor operation action
Scrollpage ();
}

function Getwindowsize () {
Gets the current window size parameter and moves the indicator to the lower-right corner of the screen based on these values
Note: When you change the size of the window with the mouse, you set the position of the indicator based on the current window's long width parameter. Otherwise, you may not see a stay in
Indicator of the original position.

For ie,document.body.clientwidth represents the width of the current window, the document.body.clientHeight represents the height, which is
Pixel px. If it is an NS browser, it corresponds to Window.innerwidth and window.innerheight.
w_x= (IsNS)? Window.innerwidth-5: Document.body.clientWidth;
W_y= (IsNS)? Window.innerHeight:document.body.clientHeight;

Next, set the width and height of the layer that represents the indicator area.
(IsNS)? item.clip.width=42:item.width=42;
(IsNS)? item.clip.height=20:item.height=20;

Move the indicator to the appropriate position according to the parameters set above
MoveItem ();
}

function MoveItem () {
Move indicator

for NS browsers
if (IsNS) {
Item.moveto ((pagexoffset+w_x-70), (W_Y+PAGEYOFFSET-50))
}else{
If it is IE, assign values directly to the layer's 2 properties: Pixelleft represents the X-coordinate, and Pixeltop represents the y-coordinate
Note: When scrolling occurs on the screen, Document.body.scrollLeft and Document.body.scrollTop respectively represent
The horizontal distance of the scroll and the longitudinal distance. The w_x and w_y respectively represent the relative coordinates of the indicator in the current window,
So, to add the 2, you get the absolute coordinates of the indicator.
item.pixelleft=document.body.scrollleft+w_x-70;
item.pixeltop=w_y+document.body.scrolltop-50;
}
}

function Resizens () {
For NS browsers, perform timed operations when the window size changes

The SetTimeout function sets the action to be performed at timed intervals, which means that the document.location.reload () operation is performed every 400 milliseconds
SetTimeout (' Document.location.reload () ', 400);
}

function Scrollpage () {
Page scrolling control function

status = ';
Both Okscroll and godown are scrolling status flags, whose values are controlled by the onmouseover of the indicator layer and ONMOUSEOUT2 events.
Window.scrollby (x,y) control page scrolling, x, y respectively, the horizontal and vertical scrolling distance, in pixels px.
When you set the Y value larger, the distance will be larger each time you scroll.
if (Okscroll) {
if (Godown) {
(IsNS)? Window.scrollby (0,4): Window.scrollby (0,4);
} else {
(IsNS)? Window.scrollby (0,-4): Window.scrollby (0,-4);
}
}

After the page is scrolled, the indicator no longer stays where we expect. So, to perform the move function again, move it to the lower-right corner of the screen.
So, it looks as if it's always there;--)
MoveItem ();

Set the scrolling function to execute at timed intervals. The time here indicates the period of monitoring the user's operation state, the smaller the representation the more accurate, but the program will also
More "Busy". Setting too long will result in slow-motion delay, as if the computer is slow when we move the mouse pointer to the downward indicator
, the screen does not react immediately, but waits for some time before scrolling down;
According to your needs, and to test, set this value.
SetTimeout (' Scrollpage () ', 158);
}

Start the related script function after the page is loaded
After you set up the page to load, start the init function first
Window.onload=init;

Set the function to start when the window size is transformed
(IsNS)? Window.onresize=resizens:window.onresize=getwindowsize;

End-->
</script >

< BODY >

<!--define a layer with a div tag so that it can be controlled in a script program-->
<!--Next, add 2 events to the indicator image, and when they occur, set the corresponding action state variable-->
< DIV Id=item >< A
Onmouseout=okscroll=false href= "javascript:void (0)" >< IMG
Src= "Http://www.webjx.com/htmldata/2005-06-15/down.gif" border=0 >< A >< A
Onmouseout=okscroll=false
href= "javascript:void (0)" >< IMG src= "http://www.webjx.com/htmldata/2005-06-15/up.gif" border=0 ></A > </div >
< P >

<!--The following is the content of the page, written longer, so that you can see the operation effect-->
< CENTER > Begin
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > Use JavaScript to make page scrolling effect
< P > End
< P ></center >
< P >< P ></body >Demo effect

Ok! Read the above code to explain in detail, do you understand the skills? Software is omnipotent, isn't it?