效果图及代码如下：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><script src="jqNews.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /></head><body> <div> <div id="jqnews"> <div><a href="#">Tutto su msn</a><br /> <img src="images/amsn.png" /> </div> <div> <a href="#">Nuove fotocamere da 150 Mila px</a><br /> <img src="images/camera.png" /> </div> <div> <a href="#">Accesso Negato</a> <br /> <img src="images/error.png" />Cosa fare? </div> <div> <a href="#">Nuovo sw per Note</a> <br /> <img src="images/knotes.png" /> </div> <div> <a href="#">Trovare casa</a> <br /> <img src="images/kfm_home.png" /> </div> <div> <a href="#">Ms-Dos</a> <br /> <img src="images/konsole.png" /> </div> </div> </div><br />
</body></html>
jqNews.js：
/** JqNews - JQuery NewsTicker* Author: Gravagnola Saverio and Iuliano Renato* Version: 1.0*/
var newsVisual = 4; // Numero di news da visualizzare - news to be displayedvar intervallo = 5000; // >1500
$(document).ready(function() { // Totale news var numNews = $("#jqnews").children().length; // Controllo di overflow if (newsVisual > numNews) { newsVisual = numNews; }
// Hide delle news superflue all'inizializzazione for (var i = newsVisual; i < numNews; i++) { $($("#jqnews").children()[i]).css("opacity", "0"); } var gestInter = setInterval(jqNewsRotate, intervallo);
// Gestione del mouseover-mouseout $("#jqnews").mouseover(function() { clearInterval(gestInter) }); $("#jqnews").mouseout(function() { gestInter = setInterval(jqNewsRotate, intervallo); });});
function jqNewsRotate(_newsVisual) {
// Inserire lo stesso valore utilizzato per definire l'altezza ed i margini dei div nel file css/style.css var altezzaDiv = -118; var margineDiv = 5;
// Hide della prima news $($("#jqnews").children()[0]).animate({ opacity: 0 }, 1000, "linear", function() { // Movimento verso l'alto $($("#jqnews").children()[0]).animate({ marginTop: altezzaDiv }, 1000, "linear", function() { // Ripristino posizione elemento nascosto $($("#jqnews").children()[0]).css("margin", margineDiv); // Spostamento in coda dell'elemento nascosto $("#jqnews").append($($("#jqnews").children()[0])); // Visualizzazione dell'ultima news $($("#jqnews").children()[(newsVisual - 1)]).animate({ opacity: 1 }, 1500); }); });}
style.css:#jqnews{ overflow: hidden; height: 500px; width: 160px; border: solid 1px #000;}
#jqnews div{ display: block; overflow: hidden; background-color: #def; height: 118px; width: 150px; margin: 5px;}
#jqnewsVert{ overflow: hidden; height: 500px; width: 160px; border: solid 1px #000; margin:auto;}
#jqnewsVert div{ display: block; overflow: hidden; background-color: #def; height: 118px; width: 150px; margin: 5px;}
#jqnewsOriz{ border: solid 1px #000; height: 130px; width: 650px; overflow: hidden; margin:auto;}
#jqnewsOriz div{ float:left; border: solid 1px #000; background: #def; height: 118px; width: 150px; margin: 5px; display:block;}
