JQuery implements automatic scrolling of the List to display news and jquery news

JQuery implements automatic scrolling of the List to display news and jquery news

You need to display News (announcements, activities, images, and so on) cyclically in a small area on the page. When you hover the mouse over the page, the scroll stops and the prompt is displayed. When you leave the page, the scroll continues.

:

Dry Loading

Html:
Copy codeThe Code is as follows:
<Div id = "news">
<Ul>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "aaaaaaaaaaaaaaa"> aaaaaaaaaaaaa </a> </li>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "bbbbbbbbbbbbbbbbbbb"> bbbbbbbbbbbbbbbbb </a> </li>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "ccccccccccccc"> ccccccccccccccccc </a> </li>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "ddddddddddddddddd"> ddddddddddddddddddd </a> </li>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "eeeeeeeeeeeeeee"> eeeeeeeeeeeeeee </a> </li>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "fffffffffffff"> fffffffffffff </a> </li>
<Li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" title = "ggggggggggggg"> ggggggggggggg </a> </li>
</Ul>
</Div>

Css:
Copy codeThe Code is as follows:
Ui, li {
List-style: none;
}
# News {
Height: 75px;
Overflow: hidden;
}

The key is the js file:
Copy codeThe Code is as follows:
$ (Function (){
Var $ this = $ ("# news ");
Var scrollTimer;
$ This. hover (function (){
ClearInterval (scrollTimer );
}, Function (){
ScrollTimer = setInterval (function (){
ScrollNews ($ this );
},2000 );
}). Trigger ("mouseleave ");

Function scrollNews (obj ){
Var $ self = obj. find ("ul ");
Var lineHeight = $ self. find ("li: first"). height ();
$ Self. animate ({
"MarginTop":-lineHeight + "px"
},600, function (){
$Self.css ({
MarginTop: 0
}). Find ("li: first"). appendTo ($ self );
})
}
})

It mainly involves understanding and using hover, setInterval, clearInterval, animate, And the marginTop attributes (marginLeft, top, left, and so on). Note that if this attribute is not added. trigger ("mouseleave"), the list does not scroll during page initialization, and appendTo can directly move elements.

I want to add the auto-circular upward scrolling effect to this jQuery code. The Code is as follows:

Give you a function
Now you can call it. It supports acceleration, loop, interval, up/down, and left/right scrolling.
Directly copy this code to a JS file. This Code requires the running environment above jquery1.3.
The Code contains call examples.
Hope to adopt ··

/**
* @ ClassDescription super Marquee, which can be used for image navigation and image rotation
* @ Dependence jQuery 1.3.2
* @ DOM
* <Div id = "marquee">
* <Ul>
* <Li> </li>
* <Li> </li>
* </Ul>
* </Div>
* @ CSS
* # Marquee {width: 200px; height: 50px; overflow: hidden ;}
* @ Usage
* $ ('# Marquee'). superMarquee (options );
* @ Options
* Distance: 200, // a rolling distance
* Duration: 20, // The easing effect. The smaller the movement time, the faster the speed. If the value is 0, the easing effect is unavailable.
* Time: 5, // pause time, in seconds
* Direction: 'left', // scroll direction, 'left', 'right', 'up', 'drop'
* ScrollAmount: 1, // step size
* ScrollDelay: 20 // duration, in milliseconds
* IsEqual: true, // whether the length and width of all scrolling elements are equal, true, false
* Loop: 0, // The number of times the loop is rolled. If the value is 0, it is unlimited.
* BtnGo: {left: '# goL', right: '# goR'}, // the ID of the control direction button, which has four attributes: left, right, up, down corresponds to four directions respectively.
* EventGo: 'click', // mouse event
* ControlBtn: {left: '# goL', right: '# goR'}, // the ID of the button that controls the acceleration scroll. There are four attributes: left, right, up, down corresponds to four directions respectively.
* NewAmount: 4, // The step for accelerating Rolling
* EventA: 'mouseenter', // mouse event, acceleration
* EventB: 'mouseleave ', // mouse event, original speed
* NavId: '# marqueeNav', // navigation container ID, navigation DOM: <ul> <li> 1 </li> <li> 2 </li> <ul>, navigation CSS :. navOn
* EventNav: 'click' // navigation event
*/
(Function ($ ){

$. Fn. superMarque ...... remaining full text>

Jquery implements text scrolling to the Left Loop

Simple static scrolling <div> <marquee scrollamount = "10" scrolldelay = "0" ction = "left"> looping left </marquee> </div> move the scrolling items to "want to do circular scrolling ".