Home > Article > Web Front-end > jquery multi-line scrolling code (with detailed explanation)_jquery
jquery multi-line scrolling code (with detailed explanation)_jquery
- WBOYOriginal
- 2016-05-16 18:24:551199browse
复制代码 代码如下:
多行滚动演示：
- 这是公告标题的第一行
- 这是公告标题的第二行
- 这是公告标题的第三行
- 这是公告标题的第四行
- 这是公告标题的第五行
- 这是公告标题的第六行
- 这是公告标题的第七行
- 这是公告标题的第八行
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
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.
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.
Statement：
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
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 skillsNext 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
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills