jquery multi-line scrolling code (with detailed explanation)

复制代码代码如下:

无标题文档

多行滚动演示：

这是公告标题的第一行

这是公告标题的第二行

这是公告标题的第三行

这是公告标题的第四行

这是公告标题的第五行

这是公告标题的第六行

这是公告标题的第七行

这是公告标题的第八行

down

up
件

This code is just multi-line scrolling.

1. First, the height limit of a

is 100px, and each row is 25px. Only 4 rows can be displayed in total, but there are eight rows in the div. How to display it?

There is overflow:hidden in the scrollDiv attribute, which means that if it cannot be displayed, it will be hidden.

2. The second question is which four lines are displayed in

, because _this.find("li:first").appendTo(_this); cuts and inserts the first four lines to the back , and set the height to start from 0, so that only the first four lines can be displayed. _this.find("li:last").show().prependTo(_this); In the same way, insert the next four lines to the front.

3. The third question is animate, which is a function of jquery that produces animation effects. But _btnDown.unbind("click",scrollDown); why does it need to be unbound after being bound? This is because when down is clicked, the scrollDown function will be executed. When the execution goes inside, the binding must be untied, so as not to execute the scrollDown function again when down is clicked at this time, causing confusion. Only bind after the scrolling is completed.

4. It will also scroll automatically when not clicked. At that time, because there was _this.hover(autoStop,autoPlay).mouseout();

The hover method in jQuery is a very commonly used method. It accepts two parameters. The first parameter is when the mouse moves into the object. The event that is triggered, the second parameter is the event that is triggered when the mouse moves out of the object
5. $("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"}); called Scroll and executed: function(opt,callback), However, only opt is passed here, and there is no callback function. And passing parameters is also very strange. But just think that it can be passed like this, which is equivalent to an object.

I hope to know more about Paizhuan.

Related labels：

jquery

source：php.cn

Previous article：High-performance WEB development. Flush divides the page into chunks and renders it gradually. Flush divides the page into chunks and renders it step by step_javascript skills Next article：Thermometer animation effect based on Jquery_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

jquery multi-line scrolling code (with detailed explanation)_jquery