Controllable scrolling area on the page

Source: Internet
Author: User

Effect Preview

Next we will explain in detail how to create this effect:

First, add ". Opacity {filter: alpha (opacity = 100)" to the style sheet!

<Style type = "text/CSS">
<! --
. Opacity {filter: alpha (opacity = 100 )}
-->
</Style>

Then add the following to the HTML code:

<SCRIPT>
Function movstar (A, time ){
Movx = setinterval ("mov (" + A + ")", time)
}
Function movover (){
Clearinterval (movx)
}
Function mov (){
Scrollx=new_date.doc ument. Body. scrollleft
Scrolly1_new_date.doc ument. Body. scrolltop
Scrolly = scrolly +
New_date.20.1_scroll (scrollx, scrolly)
}
Function o_down (theobject ){
Object = theobject
While (object. Filters. Alpha. Opacity> 60 ){
Object. Filters. Alpha. Opacity + =-10}
}
Function o_up (theobject ){
Object = theobject
While (object. Filters. Alpha. Opacity <100 ){
Object. Filters. Alpha. Opacity + = 10}
}
Function wback (){
If (new_date.history.length = 0) {window. History. Back ()}
Else {new_date.history.back ()}
}
</SCRIPT>

Then add "class =" opacity "onmousedown = movover (); movstar (-3, 2) onmouseout = movover (); o_up (this) to the code of the up arrow image) onmouseover = movstar (-); o_down (this) onmouseup = movover (); movstar (-) alt = "you can scroll up quickly without clicking "".

As follows:

The cursor controls the code for Scrolling up the text. When the mouse moves to the up.gif image, the text will scroll up, and pressing the arrow will speed up the scroll up.

The method for creating a downward arrow is the same as that for creating an image. Add "class =" opacity "onmousedown = movover (); movstar () onmouseout = movover (); o_up (this) onmouseover = movstar () to the Code ); o_down (this) onmouseup = movover (); movstar () alt = "you can scroll down quickly without clicking "".

As follows:

Add the following code to the area where the text is to be displayed:

<IFRAME border = 0 frameborder = 0 framespacing = 0 Height = 120 marginheight = 0 marginwidth = 0 name = new_date noresize scrolling = No src = "iframe.htm" width = 200 vspale = "0"> </iframe>

Connect a page named iframe.htm. Height = 120 width0000200controls the display area of the iframe.htm page on the current page. Edit the iframe.htm file and put the content you want to update.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.