`
jsczxy2
  • 浏览: 1277717 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

jquery滚动公告效果

阅读更多

http://wange.im/jquery-slideshow-twitter.html

 

仿Twitter的公告效果:

方法如下:

1、HTML 部分:

<ul id="twitter">
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
</ul>

关于输出 twitter 消息的方法很多,我就总集了两篇:WordPress 非插件调用最新 TwitterWordPress 免插件输出最新 Twitter,已经加密,密码为:wange.im,有兴趣的朋友可以看一下。

2、载入 JQuery

直接用 google 托管的就行。

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery
/1.2.6/jquery.min.js"></script>

3、JQuery 执行代码

$(document).ready(function(){
    $("#twitter li:not(:first)").css("display","none");
    var B=$("#twitter li:last");
    var C=$("#twitter li:first");
    setInterval(function(){
    if(B.is(":visible")){
    C.fadeIn(500).addClass("in");B.hide()
    }else{
    $("#twitter li:visible").addClass("in");
    $("#twitter li.in").next().fadeIn(500);
    $("li.in").hide().removeClass("in")}
    },3000//每3秒钟切换一条,你可以根据需要更改
})
分享到:
评论

相关推荐

    jQuery网站新闻公告自动左右滚动切换代码

    【jQuery网站新闻公告自动左右滚动切换代码】是网页设计中常见的一种动态效果,它通过JavaScript库jQuery实现,为网站的新闻或公告展示提供了一种吸引用户注意力的方式。这个功能允许内容在页面上以平滑的动画效果...

    jquery新闻公告滚动效果

    "jquery新闻公告滚动效果"是利用jQuery实现的一种常见的网页动态展示方式,常用于网站的新闻、公告或者最新消息的展示,能够吸引用户的注意力并提供信息更新。 首先,要实现这种滚动效果,我们需要理解jQuery的基本...

    jQuery实现的上下滚动公告栏

    总的来说,通过理解和运用jQuery的`animate()`和`setInterval()`方法,我们可以轻松地创建出动态、吸引人的上下滚动公告栏,提升网站的用户体验。这个过程既展示了jQuery的强大功能,也体现了JavaScript在网页交互...

    jQuery新闻公告文字自动滚动代码.zip

    《jQuery实现新闻公告文字自动滚动的代码解析》 在网页设计中,为了吸引用户的注意力并高效展示信息,新闻公告文字的自动滚动效果被广泛应用。jQuery作为一款轻量级的JavaScript库,提供了丰富的功能和易用的API,...

    上下滚动公告效果.rar

    这个上下滚动公告效果.rar文件可能包含一个实现此类效果的代码示例或库。让我们详细探讨一下公告滚动效果及其在网页开发中的实现方法。 公告滚动效果通常是用来在网站、APP或其他数字平台上显示最新消息、通知或者...

    jQuery实现网站中公告上下无缝滚动,marquee

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理和动画效果,因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中,我们将深入探讨如何使用jQuery实现这个功能。 首先,我们需要在...

    jquery滚动字幕

    "jquery滚动字幕"是指利用jQuery库来创建一种动态显示文字的效果,通常用于网站的头部或者底部,可以吸引用户的注意力,增加信息的可读性。这种效果常见于新闻网站、公告栏或电影预告片等场景。 一、jQuery滚动字幕...

    jQuery简单实用的网站公告上下滚动效果.zip

    "jQuery简单实用的网站公告上下滚动效果.zip" 提供了一个基于jQuery实现的公告滚动展示方案,它适用于初学者学习和使用。这种滚动效果可以让网站的公告信息更加吸引用户注意力,同时保持页面整洁。以下是关于这个...

    jQuery新闻公告文字横向滚动切换代码.zip

    综上所述,"jQuery新闻公告文字横向滚动切换代码"结合了HTML、CSS和jQuery的精华,通过合理的布局和动态效果,提升了网页的互动性和视觉吸引力。无论是初学者还是经验丰富的开发者,都能从中学习到如何利用jQuery...

    JQUery实现上下循环滚动效果

    在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中上下循环滚动的效果常常用于展示新闻更新、公告或者产品介绍等。本教程将详细介绍如何利用jQuery这一强大的JavaScript库来实现文字或图片的上下循环滚动...

    jQuery网站公告上下滚动展示.zip

    "jQuery网站公告上下滚动展示"就是一种实现这种效果的技术,它通过JavaScript库jQuery实现网页公告的上下滚动展示,给用户带来更加生动和直观的信息传递体验。下面将详细阐述这个主题的相关知识点。 首先,jQuery是...

    jquery滚动效果

    这些效果通常用于新闻更新、滚动公告、滑动图片轮播等场景。 在jQuery中实现滚动效果主要依赖于其内置的动画方法和事件处理机制。常见的滚动效果包括: 1. **无缝滚动**:这种效果可以让内容无限循环地向上或向下...

    jquery文字滚动效果无缝

    本主题聚焦于利用jQuery实现文字滚动效果,这种效果常用于新闻标题、滚动公告等场景,能有效地吸引用户的注意力。以下是关于"jquery文字滚动效果无缝"的详细知识点: 1. **jQuery基础**:首先,你需要对jQuery的...

    JQ 实现滚动公告

    标题中的“JQ 实现滚动公告”指的是使用jQuery库来创建一种动态效果,使得文本或消息像滚动公告一样在网页上展示。这种效果常见于网站的头部或底部,用于显示最新消息、通知或者广告。 首先,jQuery是一个轻量级的...

    公告滚动效果 js网站特效

    很多公告滚动插件都是基于jQuery构建的,它提供了一套方便的API,使得实现滚动效果更为便捷。 6. **插件与自定义开发**:对于初学者,可以利用现有的公告滚动插件,如jQuery的"slidetogether"、"news ticker"等。而...

    jquery 文字向上滚动

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

    jquery上下滚动插件

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

    【经典】滚动新闻_Jquery

    然后,使用Jquery编写JavaScript代码来实现滚动效果。单行滚动可以使用`animate()`函数来平滑移动元素,多行滚动则可能需要结合`delay()`和`queue()`函数来控制不同新闻项的滚动顺序和速度。 以下是一个简单的单行...

    用jQuery的Animate方法实现公告轮播效果,文字停留几秒后向上滚动

    用jQuery的Animate方法实现公告轮播效果,文字停留几秒后向上滚动,类似招行app的那个公告效果,可自定义停留时间,样式自己写css调节,放在mui框架可以看到一个可爱的小喇叭。/笑脸/

    jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐

    标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例,它主要用于创建一串文字在单一行内循环滚动,通常用于网站的头部或侧边栏,以动态展示最新的新闻标题或公告。 要实现这个效果,首先...

Global site tag (gtag.js) - Google Analytics