JavaScript DHTML/HTML/Marquee
Содержание
"behavior" Example
<html>
<head>
<script language="JavaScript">
function function1(){
document.all.myMarquee.behavior = "alternate";
}
function function2(){
document.all.myMarquee.behavior = "slide";
}
</script>
</head>
<body>
<marquee id="myMarquee">marquee</marquee>
<input type="button" value="behavior = alternate" onClick="function1();">
<input type="button" value="behavior = slide" onClick="function2();">
</body></html>
Controlling MARQUEE Object Properties
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
<HTML>
<HEAD>
<TITLE>MARQUEE Object Properties</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// one function does all!
function setMARQUEEAttr(select) {
if (document.all && document.all.myMARQUEE) {
var choice = select.options[select.selectedIndex].value
if (choice) {
document.all.myMARQUEE.setAttribute(select.name, choice)
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>MARQUEE Object Properties</H1>
<BR>
<HR>
<MARQUEE ID="myMARQUEE" WIDTH=400 HEIGHT=24>This is the MARQUEE element object
you will be controlling.</MARQUEE>
<FORM>
<INPUT TYPE="button" VALUE="Start Marquee" onClick="document.all.myMARQUEE.start()">
<INPUT TYPE="button" VALUE="Stop Marquee" onClick="document.all.myMARQUEE.stop()">
<BR>
Select a behavior:
<SELECT NAME="behavior" onChange="setMARQUEEAttr(this)">
<OPTION></OPTION>
<OPTION VALUE="alternate">Alternate</OPTION>
<OPTION VALUE="scroll">Scroll</OPTION>
<OPTION VALUE="slide">Slide</OPTION>
</SELECT>
<BR>
Select a background color:
<SELECT NAME="bgColor" onChange="setMARQUEEAttr(this)">
<OPTION></OPTION>
<OPTION VALUE="red">Red</OPTION>
<OPTION VALUE="green">Green</OPTION>
<OPTION VALUE="blue">Blue</OPTION>
<OPTION VALUE="#FA8072">Some Hex Triplet Value</OPTION>
</SELECT>
<BR>
Select a scrolling direction:
<SELECT NAME="direction" onChange="setMARQUEEAttr(this)">
<OPTION></OPTION>
<OPTION VALUE="left">Left</OPTION>
<OPTION VALUE="right">Right</OPTION>
<OPTION VALUE="up">Up</OPTION>
<OPTION VALUE="down">Down</OPTION>
</SELECT>
<BR>
Select a scroll amount:
<SELECT NAME="scrollAmount" onChange="setMARQUEEAttr(this)">
<OPTION></OPTION>
<OPTION VALUE=4>4</OPTION>
<OPTION VALUE=6>6 (Default)</OPTION>
<OPTION VALUE=10>10</OPTION>
</SELECT>
<BR>
Select a scroll delay:
<SELECT NAME="scrollDelay" onChange="setMARQUEEAttr(this)">
<OPTION></OPTION>
<OPTION VALUE=50>Short</OPTION>
<OPTION VALUE=85>Normal</OPTION>
<OPTION VALUE=125>Long</OPTION>
</SELECT>
</BODY>
</HTML>
Marquee "direction" Example
<html>
<body>
<script language="JavaScript">
function function1(){
document.all.myMarquee.direction = "up";
}
function function2(){
document.all.myMarquee.direction = "left";
}
function function3(){
document.all.myMarquee.direction = "right";
}
function function4(){
document.all.myMarquee.direction = "down";
}
</script>
<marquee id="myMarquee" bgcolor="cyan">SCROLLING MARQUEE</marquee>
<button onclick="function1();">Up</button>
<button onclick="function2();">Left</button>
<button onclick="function3();">Right</button>
<button onclick="function4();">Down</button>
</body>
</html>
Marquee "start()" Example
<html>
<body>
<script language="JavaScript">
function function1(){
document.all.myMarquee.stop();
}
function function2(){
document.all.myMarquee.start();
}
</script>
<marquee align="left" id="myMarquee" bgcolor="red" width="300">
www.wbex.ru
</marquee>
<input type="button" value="Start" onClick="function2();">
<input type="button" value="Stop" onClick="function1();">
</body>
</html>
Marquee "stop()" Example
<html>
<body>
<script language="JavaScript">
function function1(){
document.all.myMarquee.stop();
}
function function2(){
document.all.myMarquee.start();
}
</script>
<marquee align="left" id="myMarquee" bgcolor="red" width="300">
www.wbex.ru
</marquee>
<input type="button" value="Start" onClick="function2();">
<input type="button" value="Stop" onClick="function1();">
</body>
</html>
"scrollAmount" Example
<html>
<body>
<script language="JavaScript">
function function1(){
document.all.myMarquee.scrollAmount = 2;
}
</script>
<marquee id="myMarquee" bgcolor="cyan">www.wbex.ru</marquee>
<input type="button" name="S2" value="scrollAmount = 2" onClick="function1();">
</body>
</html>
"scrollDelay" Example
<html>
<body>
<script language="JavaScript">
function function1(){
document.all.myMarquee.scrolldelay = 20;
}
</script>
<marquee id="myMarquee" bgcolor="cyan">Sample Text</marquee>
<input type="button" value="truespeed" onClick="function1();">
</body>
</html>
The blink and marquee Tags
<html>
<head>
<title>Blinking and Scrolling Text</title>
</head>
<body>
<p><blink>Watch this text blink!</blink></p>
<p><marquee>Watch this text scroll!!!</marquee></p>
</body>
</html>
"trueSpeed" Example
<html>
<body>
<script language="JavaScript">
function function1(){
document.all.myMarquee.trueSpeed = false;
}
</script>
<marquee id="myMarquee" bgcolor="cyan">Sample Text</marquee>
<input type="button" value="truespeed" onClick="function1();">
</body>
</html>