新聞段落滾動HTML5代碼向上無縫循環

2024-09-05 12:18:57

字體：大中小

來源：轉載

供稿：網友

JS與HTML5實現新聞滾動，帶個新聞段落滾動的效果，效果流暢，除了HTML5代碼外，JavaScript代碼也起到了關鍵作用，是一款不錯的網頁內容滾動特效，希望大家喜歡。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery向上循環滾動的新聞效果</title><style>#ticker { width:180px; height:300px; border:1px solid #aaaaaa; overflow:auto; }#ticker dt { font:normal 14px Georgia; padding:0 10px 5px 10px; background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff; border-bottom:none; border-right:none; position:relative; }#ticker dd { margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px; border-bottom:1px solid #aaaaaa; background-color:#e5e5e5; border-left:1px solid #ffffff; position:relative; }#ticker dd.last { border-bottom:1px solid #ffffff; }#ticker div { margin-top:0; }</style>  </head>  <body>    <div   class="hxvv5zh"   id="tickerContainer">      <dl id="ticker">        <dt class="heading">This is a news title!</dt><dd class="text">This is a snippet of the news. It could be the whole news item or it could link to another page containing...</dd>        <dt class="heading">News Heading 2</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>        <dt class="heading">News Heading 3</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>        <dt class="heading">News Heading 4</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>        <dt class="heading">This item is long!</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>      </dl>    </div>    <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>    <script type="text/javascript">	  $(function() {		var ticker = $("#ticker");		ticker.children().filter("dt").each(function() {		  var dt = $(this),		    container = $("<div>");		  dt.next().appendTo(container);		  dt.prependTo(container);		  container.appendTo(ticker);		});		ticker.css("overflow", "hidden");		function animator(currentItem) {		  var distance = currentItem.height();			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);			animator(currentItem.parent().children(":first"));		  }); 		};		animator(ticker.children(":first"));		ticker.mouseenter(function() {		  ticker.children().stop();		});		ticker.mouseleave(function() {		  animator(ticker.children(":first"));		});	  });    </script></body></html>

上一篇：使用Canvas繪制花朵

下一篇：HTML5向下滑出的網頁提示（工具條）