Home > Others

Dynamic Description navigation box (from left to right)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<Body>

<SCRIPT>
// Edit your messages. You can add as your messages a you like.
VaR message = new array ()
Message [0] = "welcome to the largest news site in China-Sina! "
Message [1] = "Welcome To Netease, the largest comprehensive website in China! "
Message [2] = "Welcome to Sohu, the largest search engine site in China! "
Message [3] = "welcome to the largest game site in China-9th city! "

// The links of your messages. Be sure that you configure as your links as messages.
// If don't want to link your messages write '# 'instead of an URL (see last sample ).
VaR messageurl = new array ()
Messageurl [0] = "http://www.sina.com.cn /"
Messageurl [1] = "http://www.163.com /"
Messageurl [2] = "http://www.sohu.com /"
Messageurl [3] = "http://www.the9.com /"

VaR messagetarget = new array ()
Messagetarget [0] = "_ blank"
Messagetarget [1] = "_ blank"
Messagetarget [2] = "_ blank"
Messagetarget [3] = "_ blank"
// The width of your Textbox (pixels ).
// Be sure That 'textwidth 'is slightly bigger than the 'width' configured inside the stylesheet
VaR textwidth = 260

// The height of your Textbox (pixels)
// Be sure That 'textheight 'is slightly bigger than the 'height' configured inside the stylesheet
VaR textheight = 75

// Final horizontal position of the textbox: distance to the left margin of the window (pixels)
// Important:
// If You Want to center the textbox in the middle of the browser-window then write-1.
// If you want to place the textbox on an absolute position
// Then write the number (for instance 223 ).
VaR x_finalpos =-1

// Final vertical position of the textbox: distance to the top margin of the window
VaR y_finalpos = 20

// Total number of textslices
VaR textslices = 10

// Standstill of Textbox (seconds)
VaR pausetext = 5

// Speed of horizontal gliding
VaR step = 10
VaR pause = 40

// Do not edit the variables below this line
VaR x_rightspans = 0
VaR x_leftspans = 0
VaR marginright
VaR marginleft
VaR height_slice = math. Floor (textheight/textslices)
VaR cliptop = 0
VaR clipbottom = cliptop + height_slice
VaR clipleft = 0
VaR clipright = textwidth
VaR spannummer = 0
VaR spannrbefore = 0
VaR I _message = 0
Pausetext = pausetext* 1000

Function initiate (){
If (document. All ){
If (x_finalpos =-1 ){
X_finalpos = math. Floor (document. Body. clientwidth/2)-math. Floor (textwidth/2)
}
Changemessage ()
}
}

Function changemessage (){
For (I = 0; I <= textslices-1; I ++ ){
VaR thisspan = eval ("span" + I)
Thisspan. innerhtml = "<a href = '" + messageurl [I _message] + "'target = 'blank'>" + message [I _message] + "</a>"
}
Gostartposition ()
}

Function gostartposition (){
For (I = 0; I <= textslices-1; I + = 2 ){
VaR thisspan = eval ("document. All. span" + I + ". Style ")
Thisspan. posleft = marginright
}
For (I = 1; I <= textslices-1; I + = 2 ){
VaR thisspan = eval ("document. All. span" + I + ". Style ")
Thisspan. posleft = marginleft
}
Moveslices_ie ()
}

Function moveslices_ie (){
If (x_rightspans = 0 | x_leftspans = 0 ){
If (x_rightspans = 0 ){
For (I = 0; I <= textslices-1; I + = 2 ){
VaR thisspan = eval ("document. All. span" + I + ". Style ")
Thisspan. posleft-= step
}
If (thisspan. posleft <= x_finalpos ){
X_rightspans = 1
For (I = 0; I <= textslices-1; I + = 2 ){
VaR thisspan = eval ("document. All. span" + I + ". Style ")
Thisspan. posleft = x_finalpos
}
}
}
If (x_leftspans = 0 ){
For (I = 1; I <= textslices-1; I + = 2 ){
VaR thisspan = eval ("document. All. span" + I + ". Style ")
Thisspan. posleft + = step
}
If (thisspan. posleft> = x_finalpos ){
X_leftspans = 1
For (I = 1; I <= textslices-1; I + = 2 ){
VaR thisspan = eval ("document. All. span" + I + ". Style ")
Thisspan. posleft = x_finalpos
}
}
}
VaR timer = setTimeout ("moveslices_ie ()", pause)
}
Else {
Cleartimeout (timer)
X_rightspans = 0
X_leftspans = 0
I _message ++
If (I _message> message. Length-1 ){
I _message = 0
}
VaR timer = setTimeout ("changemessage ()", pausetext)
}
}

//-End of JavaScript--->
</SCRIPT>
<Style>
A {
Color: red;
Text-Decoration: None
}
A: hover {
Color: white;
Text-Decoration: None
}
. Textbox {
Font-size: 18;
Font-family: verdana;
Font-style: normal;
Color: red;
Border-width: 4;
Text-align: center;
Background-color: blue;
Border-style: solid;
Padding: 5;
Height: 65;
Width: 250;
Overflow: Clip;
Font-weight: bold;
}
</Style>
<SCRIPT>
<! -- Beginning of JavaScript-
// Do not edit this script-block
If (document. All ){
For (I = 0; I <= textslices-1; I + = 2 ){
Marginright = Document. Body. clientwidth + 50
Document. write ("<SPAN class = 'textbox 'Id = 'span" + I + "'style = 'position: absolute; visibility: visible; left:" + marginright + "PX; top: "+ y_finalpos +" PX; clip: rect ("+ cliptop +" PX "+ clipright +" PX "+ clipbottom +" PX "+ clipleft +" PX) '> ")
Document. Write ("</span> ")
Cliptop + = 2 * height_slice
Clipbottom + = 2 * height_slice
}
Cliptop = height_slice
Clipbottom = 2 * height_slice
For (I = 1; I <= textslices-1; I + = 2 ){
Marginleft =-textwidth-50
Document. write ("<SPAN class = 'textbox 'Id = 'span" + I + "'style = 'position: absolute; visibility: visible; left:" + marginleft + "PX; top: "+ y_finalpos +" PX; clip: rect ("+ cliptop +" PX "+ clipright +" PX "+ clipbottom +" PX "+ clipleft +" PX) '> ")
Document. Write ("</span> ")
Cliptop + = 2 * height_slice
Clipbottom + = 2 * height_slice
}
}
Initiate ()
</SCRIPT>
<Div style = "position: absolute; top:-25; left: 9; width: 717; Height: 19">
</Div>
</Body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More