`

使用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>

 

 

分享到:
评论

相关推荐

    滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片

    二、jQuery滚动新闻 1. 滚动新闻原理:通过定时改变新闻项的显示位置,模拟出滚动效果。可以使用`setTimeout()`或`setInterval()`函数来实现定时任务。 2. 使用`.next()`和`.prev()`:结合`index()`方法,可以实现...

    jQuery实现滚动新闻代码.zip

    本项目“jQuery实现滚动新闻代码”利用jQuery的灵活性和强大的功能,结合Bootstrap 3框架,创建了一个响应式的新闻滚动效果。Bootstrap 3是Twitter推出的一个开源前端框架,它提供了丰富的预设样式、组件和...

    【经典】滚动新闻_Jquery

    【经典】滚动新闻_Jquery 是一个利用JavaScript库Jquery实现的动态新闻展示方案,它主要关注于创建一种吸引用户注意力的交互式体验。在网页设计中,滚动新闻是一种常见的元素,用于显示最新的更新、公告或者热门资讯...

    jQuery实现列表自动滚动循环滚动展示新闻

    通过上述知识点,我们可以用jQuery编写一个简洁有效的自动滚动循环滚动新闻展示效果。在实际应用中,可能还需要考虑更多的用户体验和浏览器兼容性问题,例如在不同分辨率的屏幕上展示效果的适配、触屏设备的手势操作...

    单行jQuery循环滚动新闻代码.rar

    "单行jQuery循环滚动新闻代码.rar" 这个标题表明这是一个使用jQuery库实现的JavaScript特效,具体是让新闻标题在一行内进行循环滚动。在网页设计中,这种效果通常用于展示最新资讯或者有限空间内的多条信息,以节省...

    jquery垂直向上逐条滚动新闻列表

    本项目"jquery垂直向上逐条滚动新闻列表"就是利用jQuery来实现一种动态效果,使新闻列表能以垂直向上的方式逐条滚动,提升用户的浏览体验。这种效果常见于新闻网站或信息展示页面,可以有效地展示大量的信息而不占据...

    jQuery滚动公告

    jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告

    jQuery左右滚动。

    标题中的“jQuery左右滚动”指的是使用JavaScript库jQuery实现的一种页面元素水平滚动的特效。这种特效常见于新闻资讯网站、产品展示区域或者轮播图组件,可以让用户方便地浏览横向排列的多个项目。 在jQuery中,...

    jquery上下滚动插件

    **jQuery上下滚动插件**是一种常用的前端开发工具,主要用于实现网页元素(如`&lt;li&gt;`列表项)的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见,可以为用户带来动态浏览体验,提升网站的互动性和...

    jquery新闻上下滚动.txt

    运用jquery实现新闻上下滚动,鼠标覆盖时新闻停留不滚动。

    jQuery新闻滚动插件Newstickerpro

    Newstickerpro是基于jQuery的一个强大且灵活的新闻滚动插件,特别适用于创建吸引用户的实时更新展示区,如网站头条、公告或滚动新闻条。 该插件的主要功能和特点包括: 1. **自定义样式**:Newstickerpro允许...

    jquery 文字向上滚动

    【标题】"jQuery 文字向上滚动"是一种网页动态效果,常用于新闻更新、公告显示或者滚动广告等场景,使得信息能够在有限的空间内持续展示,提高用户的关注度。这种效果通常是通过JavaScript库,特别是jQuery来实现的...

    jquery双重滚动特效.zip

    在实际项目中,"jQuery双重滚动特效"常用于产品展示、新闻轮播等场景。通过熟练掌握其原理和实现方式,开发者可以灵活运用到各种网页设计中,提升网页的交互性和观赏性。 总结,jQuery双重滚动特效是基于jQuery库的...

    jQuery无缝滚动原理分析

    jQuery无缝滚动,也被称为无限滚动或自动轮播,是一种在网页设计中常用的效果,它能够为用户呈现一种连续不断的浏览体验,尤其适用于展示图片、新闻或其他流式内容。这种效果通常应用于网站的首页或者产品展示区域,...

    jQuery无缝滚动

    在网页设计中,为了提供更好的用户体验,许多开发者选择使用jQuery无缝滚动效果。这种效果能够使页面内容以平滑、连续的方式展现,为用户带来无中断的浏览体验。jQuery,一个强大的JavaScript库,使得实现这样的功能...

    jquery 表格自动滚动 类似于新闻

    本主题将深入探讨如何使用jQuery实现一个表格自动滚动的效果,类似于新闻滚动条,使得用户无需手动翻页,即可查看表格中的所有内容。 首先,我们需要创建一个包含数据的HTML表格。表格的基本结构如下: ```html ...

    jQuery Bootstrap响应式新闻列表文字上下滚动特效

    2. `setInterval()`: 定时器函数,用于每隔一定时间执行一次特定功能,例如滚动新闻文字。 3. `.animate()`: jQuery的动画方法,用于平滑地改变CSS属性,如改变上移或下移的距离,实现文字的滚动效果。 4. `.stop()`...

    jquery循环滚动插件

    本篇文章将详细介绍jQuery循环滚动插件的原理、应用场景以及如何使用。 **1. 插件原理** jQuery循环滚动插件基于jQuery核心库,利用定时器(如`setInterval`)和DOM操作来实现元素的自动滚动效果。通常,它会改变...

    jQuery的自定义滚动组件

    高质量的jQuery滚动组件通常会提供丰富的API,允许开发者控制滚动行为,比如设置初始滚动位置、锁定滚动等。同时,组件可能还支持与其他jQuery插件的集成,进一步增强功能。 7. **实际应用** 自定义滚动组件广泛...

Global site tag (gtag.js) - Google Analytics