Controlling the
Style of Marquee Animations (-wap-marquee-style Property)
The
-wap-marquee-style WCSS property is used to specify how a marquee
block should scroll across the screen of a mobile device. The
following three marquee styles are available for use by your mobile
Internet application:
Scroll
Slide
Alternate
The
default value of the -wap-marquee-style property is "scroll".
Thus, the marquee animations shown in the earlier screenshots are of
the scroll style.
Scroll
Marquee Style
Description
of an animation of the scroll marquee style:
At
the beginning, the marquee block is off one side (left side or right
side. It depends on the value of the -wap-marquee-dir WCSS property)
of the mobile device's screen totally.
Then
the marquee block scrolls to the other side of the mobile device's
screen.
At
the end, the marquee block is off the side of the screen totally.
The
animation repeats if the value of the -wap-marquee-loop WCSS
property is larger than 1.
The
following XHTML MP/WAP CSS example shows how a marquee animation of
the scroll style looks in some mobile phone browsers. The direction
of the marquee animation is set to right-to-left in the following
XHTML MP/WAP CSS example. (Note that the default values of the
-wap-marquee-dir property and the -wap-marquee-style property are
"rtl" and "scroll" respectively, which means the
WCSS styles "-wap-marquee-dir: rtl" and
"-wap-marquee-style: scroll" can actually be omitted in the
following example.)
(marqueeEg3.xhtml)
<?xml
version="1.0"?> <!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WCSS
Tutorial</title> </head>
<body> <p
style="display: -wap-marquee; -wap-marquee-dir: rtl;
-wap-marquee-style: scroll">Hello, welcome to our WCSS
Tutorial.</p> </body> </html>
This
is the result of the above XHTML MP/WCSS example in a mobile phone
browser:
Feedback Form (ExpandCollapse)
|
|