Home > Others

Marquee.js Multi-function seamless scrolling jquery plugin

Source: Internet
Author: User
Tags prev
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First of all, to explain, this "multi-functional" seamless scrolling plug-ins, in the end how "multi-functional"? The Marquee.js plug-in provides a total of 19 optional configuration parameters, which is what I can think of as a general seamless scrolling may involve a variety of. Here's a quick look at these parameters:

View Source code Printing Help
Auto:true//whether to scroll automatically

interval:3000//Interval time (MS)

Direction: ' Forward '//forward-forward/back-backward

SPEED:500//move speed (ms)

Shownum:1//Display number

Steplen:1//per scrolling step

Type: ' horizontal '//horizontal scrolling-Horizontal/vertical scrolling-Vertical

Prevelement:null//Previous Group of button elements

Prevbefore:function () {}//previous group move before callback

Prevafter:function () {}//previous group move callback

Nextelement:null//Next Group of button elements

Nextbefore:function () {}//Next group before moving callback

Nextafter:function () {}//Next group Move callback

Pauseelement:null//pause button element

Pausebefore:function () {}//pause before callback

Pauseafter:function () {}//callback after pause

Resumeelement:null//Resume button element

Resumebefore:function () {}//Resume before callback

Resumeafter:function () {}//Resume after callback

But you don't have to be intimidated by so many parameters, because these are optional, and if you don't fill out any parameters, the default values are the parameters.

You can't wait to see the effect, I've only made a simple

The code is as follows Copy Code
<! DOCTYPE html>


<html lang= "ZH-CN" >


<head>


<meta charset= "UTF-8"/>


<script type= "Text/javascript" src= "Libs/jquery-1.9.1.min.js" ></script>


<script type= "Text/javascript" src= "Dest/marquee.js" ></script>


<script type= "Text/javascript" >


$ (function () {


$ ('. MoD '). each (function () {


var _this = $ (this),


Code = $.trim ($ ('. Demo ', _this). HTML ()). Replace (/textarea>/, ' textarea> ');


$ ('. Code ', _this). Prepend ($ (' <textarea> ' + code + ' </textarea> '));


});





$ ('. mod_ft '). each (function () {


$ (' <div class= "to_top" ><a href= "#mod_header" title= "return Top" > Return Top </a></div> "). Appendto ( This));


});








$ (' a[href*=#] '). Click (function () {


if (Location.pathname.replace (/^//, "") = = This.pathname.replace (/^//, "") && Location.hostname = = This.hostname) {


var $target = $ (This.hash);


$target = $target. Length && $target | | $ (' [name= ' + this.hash.slice (1) + '] ');


if ($target. length) {


var targetoffset = $target. Offset (). Top;


$ (' html,body '). Animate ({


Scrolltop:targetoffset


}, 1000);


return false;


}


}


});


})


</script>


<style type= "Text/css" >


* {margin:0;padding:0;}


body{font:12px/1.4 simsun,arial,helvetica,sans-serif;color: #333;}


strong{font-weight:700;}


: focus{outline:0;}


#mod_header, #mod_main, #mod_footer {width:1000px;margin:0 auto 20px;}


#mod_footer {margin:0 auto;padding-bottom:20px;font-family:arial;}


#mod_header h1{font:700 22px/2 ' Microsoft Yahei '; text-align:center;}


#desc pre{font:13px/15px ' Lucida Console ', Arial;color: #7F9F7F;}


. mod{border-bottom:5px dashed #f00; margin-bottom:10px;padding-bottom:10px;}


. mod_hd{}


. MOD_HD h2{margin-bottom:10px;padding:0 20px;font:700 16px/2 ' Microsoft Yahei ', Simsun;color: #fff; background: #104778; text-shadow:1px 1px 1px #8DB2E3;}


. mod_bd{}


. mod_ft strong{display:block;margin-bottom:5px;}


. mod_ft ul{margin-bottom:10px;}


. mod_ft Li{list-style:disc inside none;line-height:20px;


. demo,.code{margin-bottom:10px;}


. Code textarea{margin:0;border:0 none;padding:0;width:100%;height:150px;font:12px/1.4 ' Lucida Console ', Arial; Background: #ddd; resize:none;}


. To_top{text-align:right;}


. To_top A{text-decoration:none;}


#mod_footer {text-align:center;}





. wrap,.box{margin-bottom:10px;}


. Wrap Ul,.wrap. ul{overflow:hidden;clear:both;*zoom:1;


. Wrap Li,.wrap. Li{list-style:none;width:120px;height:80px;padding:5px;background: #ccc; margin:2px 5px 10px 5px;font : 30px/80px Arial;text-align:center;


</style>





<title>marquee.js-jquery Multifunction Seamless scrolling plug-in </title>


</head>


<body>


<!--S Header-->


<div id= "Mod_header" >


<h1>marquee.js-jquery Multifunction Seamless scrolling plug-in </h1>


<div id= "desc" >


<pre>


/***


@description Multi-function seamless scrolling plug-in based on JQuery


@params Auto:true # whether to scroll automatically


interval:3000 # Interval Time (MS)


Direction: ' Forward ' # forward-forward/back-backward


SPEED:500 # Move speed (ms)


Shownum:1 # Display Number


Steplen:1 # each scrolling step


Type: ' Horizontal ' # horizontal scrolling-Horizontal/vertical scrolling-Vertical


Prevelement:null # Previous Group of button elements


Prevbefore:function () {} # Previous group move before callback


Prevafter:function () {} # Previous group move callback


Nextelement:null # Next Group of button elements


Nextbefore:function () {} # Next group move before callback


Nextafter:function () {} # Next group move callback


Pauseelement:null # pause Button Element


Pausebefore:function () {} # Pause before callback


Pauseafter:function () {} # after pause callback


Resumeelement:null # Continue button element


Resumebefore:function () {} # Continue before callback


Resumeafter:function () {} # continue after callback


@author i@wange.im


@url Https://github.com/wange1228/marquee-slide


@blog http://wange.im


@version 0.4.3


***/


</pre>


</div>


</div>


<!--E Header-->





<!--S Main-->


<div id= "Mod_main" >


<!--S module A-->


<div id= "module_a" class= "mod" >


<div class= "MOD_HD" >


<h2> use case one: without any parameters (default parameters) </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "Wrap1" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap1 '). Marquee ();


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module A-->





<!--S module B-->


<div id= "Module_b" class= "mod" >


<div class= "MOD_HD" >


<h2> use case two: DOM structure without ul>li</h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "wrap2" class= "wrap" >


<div class= "ul" >


<div class= "Li" >1</div>


<div class= "Li" >2</div>


<div class= "Li" >3</div>


<div class= "Li" >4</div>


<div class= "Li" >5</div>


<div class= "Li" >6</div>


<div class= "Li" >7</div>


<div class= "Li" >8</div>


<div class= "Li" >9</div>


</div>


</div>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap2 '). Marquee ();


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module B-->





<!--S module C-->


<div id= "Module_c" class= "mod" >


<div class= "MOD_HD" >


<h2> use case three: automatic scrolling </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "wrap3" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap3 '). Marquee ({


Auto:true,


interval:3000,


SPEED:500,


Shownum:5,


Steplen:5


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module C-->





<!--S module D-->


<div id= "module_d" class= "mod" >


<div class= "MOD_HD" >


<h2> use case four: manual scrolling </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "WRAP4" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<input type= "button" value= "previous group" id= "Prev4"/>


<input type= "button" value= "next Group" id= "Next4"/>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap4 '). Marquee ({


Auto:false,


speed:1000,


Shownum:4,


Steplen:4,


Prevelement: $ (' #prev4 '),


Nextelement: $ (' #next4 ')


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module D-->





<!--S module E-->


<div id= "module_e" class= "mod" >


<div class= "MOD_HD" >


<h2> use case five: Pause/Continue scrolling </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "WRAP5" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<input type= "button" value= "Pause" id= "Pause5"/>


<input type= "button" value= "Continue" id= "Resume5"/>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap5 '). Marquee ({


Auto:true,


interval:1000,


Shownum:4,


Steplen:4,


Pauseelement: $ (' #pause5 '),


Resumeelement: $ (' #resume5 ')


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--e module e-->





<!--S module F-->


<div id= "module_f" class= "mod" >


<div class= "MOD_HD" >


<h2> use case SIX: scroll right </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "WRAP6" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap6 '). Marquee ({


Auto:true,


interval:2000,


speed:800,


Shownum:6,


Steplen:6,


Direction: ' Backward '


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module F-->





<!--S module G-->


<div id= "module_g" class= "mod" >


<div class= "MOD_HD" >


<h2> use case seven: vertical scrolling </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "WRAP7" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap7 '). Marquee ({


Auto:true,


interval:2000,


Shownum:3,


Steplen:3,


Type: ' Vertical '


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module G-->





<!--S module H-->


<div id= "Module_h" class= "mod" >


<div class= "MOD_HD" >


<h2> use case eight: Display number!== each step size </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "Wrap8" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<input type= "button" value= "previous group" id= "Prev8"/>


<input type= "button" value= "next Group" id= "Next8"/>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap8 '). Marquee ({


Auto:false,


Prevelement: $ (' #prev8 '),


Nextelement: $ (' #next8 '),


Shownum:4,


Steplen:3,


Type: ' Vertical '


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module H-->





<!--S module I-->


<div id= "module_i" class= "mod" >


<div class= "MOD_HD" >


<h2> use case nine: Support callback </h2>


</div>


<div class= "MOD_BD" >


<div class= "Demo" >


<div id= "WRAP9" class= "wrap" >


<ul>


<li>1</li>


<li>2</li>


<li>3</li>


<li>4</li>


<li>5</li>


<li>6</li>


<li>7</li>


<li>8</li>


<li>9</li>


</ul>


</div>


<input type= "button" value= "previous group" id= "Prev9"/>


<input type= "button" value= "next Group" id= "Next9"/>


<script type= "Text/javascript" >


$ (function () {


$ (' #wrap9 '). Marquee ({


Auto:false,


SPEED:500,


Shownum:3,


Steplen:3,


Prevelement: $ (' #prev9 '),


Nextelement: $ (' #next9 '),


Prevbefore:function () {


Alert (' prev before callback~ ')


},


Prevafter:function () {


Alert (' prev after callback~ ')


},


Nextbefore:function () {


Alert (' Next before callback~ ')


},


Nextafter:function () {


Alert (' Next after callback~ ')


}


});


})


</script>


</div>


<div class= "Code" ></div>


</div>


<div class= "mod_ft" ></div>


</div>


<!--E module I-->





</div>


<!--E Main-->








</body>


</html>


, it can basically cover all the features of this plugin. More combinations of parameters can achieve more than the results that are not in the DEMO.

I put marquee.js-jquery multi-functional seamless scrolling plug-in to the GitHub, interested friends can go to download the latest version of the Marquee.js, or according to their actual needs, modify, expand this plug-in is OK, welcome fork.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery datagrid plugin jquery image upload plugin jquery cycle plugin jquery meter plugin jquery drag drop plugin jquery organization chart plugin jquery validation plugin cdn

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More