<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="author" content="System Rush" />
<title>Marquee</title>
<script src="jquery.js"></script>
<script src="jquery.marquee.js"></script>
<script>
$(function() {
$("#classic").marquee();
$("#toRight").marquee({"direction": "right"});
$("#toTop").marquee({"direction": "top", "time": 50});
$("#toBottom").marquee({"direction": "bottom", "time": 15});
$("#hoverStop").marquee({"hover": "stop"});
$("#hoverSlow").marquee({"hover": 60});
});
</script>
<link rel="stylesheet" href="reset.css" media="screen" />
<style>
body {
width: 800px;
margin: 0 auto;
}
article {
color: black;
text-shadow: 1px 1px 3px #666666;
}
article > header {
font-size: 18px;
font-weight: bold;
padding: 3px;
}
article > header > hgroup > * {
padding: 5px;
}
article > header > hgroup > h2 {
font-weight: bold;
font-style: italic;
font-size: 14px;
border: 3px dashed black;
background-color: #666;
border-radius: 10px;
color: #CCC;
}
article > div {
border-radius: 10px;
padding: 5px 10px;
border: 3px solid black;
color: #666;
}
</style>
</head>
<body>
<article>
<header>
<hgroup>
<h1>Marquee classico</h1>
<h2>$("#classic").marquee();</h2>
</hgroup>
</header>
<div id="classic">Questo è il marquee classico con scorrimento verso sinistra.</div>
</article>
<article>
<header>
<hgroup>
<h1>Marquee con scorrimento verso destra</h1>
<h2>$("#toRight").marquee({"direction": "right"});</h2>
</hgroup>
</header>
<div id="toRight">Questo è il marquee con scorrimento verso destra con alta latenza.</div>
</article>
<article>
<header>
<hgroup>
<h1>Marquee con scorrimento verso l'alto con bassa latenza</h1>
<h2>$("#toTop").marquee({"direction": "top", "time": 50});</h2>
</hgroup>
</header>
<div id="toTop">Questo è il marquee con scorrimento verso l'alto lento.<br/>bla bla bla bla<br/>bla bla bla bla<br/>bla bla bla bla<br/>bla bla bla bla</div>
</article>
<article>
<header>
<hgroup>
<h1>Marquee con scorrimento verso il basso</h1>
<h2>$("#toBottom").marquee({"direction": "bottom", "time": 15});</h2>
</hgroup>
</header>
<div id="toBottom">Questo è il marquee con scorrimento verso il basso veloce.<br/>bla bla bla bla<br/>bla bla bla bla<br/>bla bla bla bla<br/>bla bla bla bla</div>
</article>
<article>
<header>
<hgroup>
<h1>Marquee con stop all'hover</h1>
<h2>$("#hoverStop").marquee({"hover": "stop"});</h2>
</hgroup>
</header>
<div id="hoverStop">Questo è il marquee che al verificarsi di hover si ferma.</div>
</article>
<article>
<header>
<hgroup>
<h1>Marquee con aumento latenza all'hover</h1>
<h2>$("#hoverSlow").marquee({"hover": 60});</h2>
</hgroup>
</header>
<div id="hoverSlow">Questo è il marquee che al verificarsi di hover rallenta.</div>
</article>
</body>
</html>
