Code Snippet </> Info
Snippet Name: jQuery Endless Div Scroll
Description: Add an endless DIV scroller to your web page.
Example: View Code Demo
Note:
Author: Malek Chtiwi
Last Modified: 2015-03-19 01:34:30
Language: html
Highlight Mode: html
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Endless Div Scroll</title>
<style type="text/css">
html,body {
margin:0px; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);
}
.title {text-align:center;font-family:Georgia;font-size:46px;margin-top:10px;margin-bottom:0px;}
.txt {font-size:14px;text-align:center;margin-bottom:15px;}
.es {font-family:Verdana;font-size:20px;margin:0px auto 0px auto;background-color:#ffff99;-moz-border-radius:15px;border-radius:15px;border:1px solid #cccc33;padding:4px;}
.is {border-top:5px solid #555555;border-bottom:5px solid #555555;}
.is img {border:0px;border-left:2px solid #555555;}
</style>
</head>
<body>
<div class="title">jQuery Endless Div Scroll <sup>v1.0</sup></div>
<div class="txt">
<a href="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/jquery_endless_div_scroll.zip">Download Endless Scroll</a> : Free jQuery Div scrolling plugin</div>
<div id="s1" class="is">
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i0.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i1.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i2.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i3.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i4.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i5.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i6.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i7.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i8.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/i9.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/ia.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/ib.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/ic.jpg" /></a>
<a href="http://snapbuilder.com/"><img src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/imgs/id.jpg" /></a>
</div>
<div style="text-align:center;padding:10px;">
<div style="margin-left:auto;margin-right:auto;width:700px;text-align:left;">
<b>Usage : </b><br /><br />
$(window).load(function () {<br />
$("#divID").endlessScroll({ width: '100%', height: '100px', steps: -2, speed: 40, mousestop: true });<br />
});<br /><br />
<b>Parameters : </b><br /><br />
<i>width :</i> Desired div's width.<br />
<i>height :</i> Desired div's height.<br />
<i>steps :</i> pixel step for the scrolling, also controls the direction, a negatif value (left), a positive value (right).<br />
<i>speed :</i> animation speed, from 0 (quicker) to infinite (slower).<br />
<i>mousestop :</i> if set to true the scrolling stops when the mouse is over the div.<br />
</div>
</div>
<div id="s2" class="es">Endless Div Scroll jQuery Plugin : this plugin will apply an infinite scroll effect to any div's content, including Text, Images, Divs, Anchors... You can apply a pause on mouse over, change directions, speed, steps ...</div>
<div style="text-align:center;padding:10px;">Download here : <a href="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/jquery_endless_div_scroll.zip">jQuery Endless Div Scroll</a></div>
<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_195.html">jQuery Endless Div Scroll Code Snippet</a> page. ]
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://snapbuilder.com/code_snippets/view_code_example/jquery/div/endless_div_scroller/endless_scroll_min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$("#s1").endlessScroll({ width: '100%', height: '100px', steps: -2, speed: 40, mousestop: true });
$("#s2").endlessScroll({ width: '700px', height: '26px', steps: -2, speed: 40, mousestop: false });
});
</script>
</body>
</html>
|
