当前位置: 代码迷 >> Web前端 >> 应用Jquery做的滚动新闻
  详细解决方案

应用Jquery做的滚动新闻

热度:61   发布时间:2012-11-18 10:51:21.0
使用Jquery做的滚动新闻

滚动新闻代码从是网上找的,自己做了一些修改,特别是新闻比较长时.

<ul class="scrollBox">
<li>
<a href="#" title="${news.title }">abc</a>
</li>
  <li>
<a href="#" title="${news.title }">abc很常的新闻标题</a>
</li>
  <li>
<a href="#" title="${news.title }">abc<div>${news.title }</div></a>
</li>
</ul>
<style type="text/css">
.scrollBox {
	BACKGROUND: black; HEIGHT: 38px; color:white;
}
UL LI {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 0px;
}
ul li {
	overflow: hidden; text-overflow:ellipsis;white-space: nowrap;
}
UL LI.odd {
	BACKGROUND: black;
}</style>
<script type="text/javascript">
  $(document).ready(function(){
    $('.scrollBox li:even').addClass('odd');
    $('.scrollBox:first').scroll();
  });
/*&lt;![CDATA[*/
  (function($) {  // 滚动插件代码
    $.fn.scroll = function(options) {
      options = options || {};
      this.css('overflow', 'hidden');
      var scroll = (function(self) {
        return function() {
          if (self.data('scroll_stop')) {
            return;
          }
          var li = self.find('li:first');
          var t = parseInt(li.css('marginTop')) || 0;
          li.animate({
            'marginTop': (t - li.outerHeight()) + 'px'
          }, options.speed || 'slow', function() {
            self.append(li);
            li.css('marginTop', t + 'px');
          });
        };
      })(this);
      setInterval(scroll, options.delay || 2000);
      this.hover(function() {
        $(this).data('scroll_stop', true);
      }, function() {
        $(this).removeData('scroll_stop');
      });
    };
  })(jQuery);</script>

?

?

  相关解决方案