Javascript scroll items like Flash with jCarousel library
Per gli amanti del JavaScript con effetti molto simili al Flash esistono dei package JS e CSS che consentono di fare molto stile fashion. Una di queste librerie fashion è jCarousel Library, che mette a disposizione effetti sullo scroll di elementi in lista, come immagini, testi, links, ecc., sia per uno scroll verticale per uno scroll orizzontale.
Lo snippet seguente aggiunge un effetto flash mediante JavaScript ad una lista di immagini, in pratica un adrotator simil-flash.
Per vedere l’esempio fai click qui
<!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" xml:lang="en-us">
<head>
<title>Javascript scroll items like Flash with jCarousel library</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- jQuery library -->
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<!-- jCarousel library -->
<script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
<!-- jCarousel core stylesheet -->
<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
<!-- jCarousel skin stylesheet -->
<link rel="stylesheet" type="text/css" href="skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel Example</h1>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" /></li>
</ul>
</div>
</body>
</html>
Download source: Scroll_Items_Like_Flash_with_JS.zip (30,60 kb)
Per gli amanti del JavaScript con effetti molto simili al Flash esistono dei package JS e CSS che consentono di fare molto stile fashion. Una di queste librerie fashion è jCarousel Library, che mette a disposizione effetti sullo scroll di elementi in lista, come immagini, testi, links, ecc., sia per uno scroll verticale per uno scroll orizzontale.
Lo snippet seguente aggiunge un effetto flash mediante JavaScript ad una lista di immagini, in pratica un adrotator simil-flash.
Per vedere l’esempio fai click qui
<!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" xml:lang="en-us">
<head>
<title>Javascript scroll items like Flash with jCarousel library</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- jQuery library -->
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<!-- jCarousel library -->
<script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
<!-- jCarousel core stylesheet -->
<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
<!-- jCarousel skin stylesheet -->
<link rel="stylesheet" type="text/css" href="skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel Example</h1>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" /></li>
</ul>
</div>
</body>
</html>
Download source: Scroll_Items_Like_Flash_with_JS.zip (30,60 kb)
Lascia un commento