Marquee text Scrolling

Source: Internet
Author: User

For scrolling, just know the Superslide plugin that uses jquery. In Qinghai project, because the design size is 1400*900, but the need to adapt to the screen of 1024x768, have to use zoom overall zoom, but this overall shrinkage down, because the Chrome browser has a minimum of 12 pixel size font restrictions, the use of the plugin scrolling text will overlap. Finally, the use of super complex judgment browser, judging the size of the screen, and then to cut the original text to solve. Unexpectedly HTML has a marquee tag, can be directly used, not only without the external plug-in, not to each news height is not fixed and create a gap caused by the ugly and headache, because superslide each li is fixed, even if not fixed, will automatically according to the longest bar to determine the width , which causes the short title to produce extra blanks.

Plug-in mode:

First of all to introduce JS file: <script type= "Text/javascript" src= "js/jquery. Superslide.2.1.1.js "></script>

Then the text will add JS code, Div also need more than two sets:

<div class= "Txtmarquee-top" >
<div class= "BD" >
<ul class= "Infolist" >
<li><a href= "http://www.smhyj.gov.cn/shows.asp?id=4593&tp=49" target= "_blank" title= " The city's first provincial modern agricultural (fishery) industry comprehensive zone through the acceptance of the 2015-06-23 "> The First Provincial modern agriculture (fishery) industry comprehensive zone through acceptance 2015-06-23</a></li>
<li><a href= "http://www.smxlytcj.cn/shows.asp?id=465" target= "_blank" title= "the green work of the Sanmen Plain is approved by the deputy governor of Huang Xuming 2015-06-08 "> Sanmen Plains Greening Work received Huang Xuming Deputy Governor Affirmation 2015-06-08</a></li>
<li><a href= "http://www.smhyj.gov.cn/shows.asp?id=4587&tp=49" target= "_blank" title= " Sanmen County Aquaculture Technology Promotion Station held culture training course 2015-06-01 "> Sanmen County Aquatic Technology Extension Station to hold culture training course 2015-06-01</a></li>
</ul>
</div>
</div>
<script type= "Text/javascript" >
JQuery (". Txtmarquee-top"). Slide ({maincell: ". BD ul", Autoplay:true,effect: "Topmarquee", vis:2,intertime:50});
</script>

Using the marquee code is simple:

<ul class= "Infolist" >
<marquee behavior= "scroll" onmouseover= "This.stop ()" style= "width:100%; height:65px "onmouseout=" This.start () "scrollamount=" 2 "direction=" Up ">
<li><a href= "http://www.smhyj.gov.cn/shows.asp?id=4593&tp=49" target= "_blank" title= " The city's first provincial modern agricultural (fishery) industry comprehensive zone through the acceptance of the 2015-06-23 "> The First Provincial modern agriculture (fishery) industry comprehensive zone through acceptance 2015-06-23</a></li>
<li><a href= "http://www.smxlytcj.cn/shows.asp?id=465" target= "_blank" title= "the green work of the Sanmen Plain is approved by the deputy governor of Huang Xuming 2015-06-08 "> Sanmen Plains Greening Work received Huang Xuming Deputy Governor Affirmation 2015-06-08</a></li>
<li><a href= "http://www.smhyj.gov.cn/shows.asp?id=4587&tp=49" target= "_blank" title= " Sanmen County Aquaculture Technology Promotion Station held culture training course 2015-06-01 "> Sanmen County Aquatic Technology Extension Station to hold culture training course 2015-06-01</a></li>
</Marquee>
</ul>

Parameter settings for marquee:

behavior: Setting the way to scroll

Alternate: rolling back and forth

Scroll: Repeating scrolling

Slide: No repetition

bgcolor: sets the background color of the active caption.

Height Sets the altitude of the active caption

Width Set the length of the active caption

Loop Sets the number of scrolling times, and when loop=-1 means scrolling down, the default is-1

scrollamount Set the scrolling speed of the active caption, unit pixels

Scrolldelay Set the delay time between active caption scrolling two times, unit millisecond (MS)

two events commonly used by marquee:
onmouseout= "This.start ()" When the mouse moves out of the area;onMouseOver= "this.stop ()" When the mouse moves into the area

Marquee text Scrolling

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.