`

JQ 实现滚动公告

阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 实现滚动公告</title>
<script src="jquery-1.10.1.min.js" ></script>
<link rel="stylesheet" href="base.css" />
<style>
ul{ border: 1px solid #eee; width: 300px; margin: 20px auto 0 auto;}
ul li{height: 30px; line-height: 30px;}
</style>
</head>
<body>
<ul>
	<li>我是第1条公告</li>
	<li>我是第2条公告</li>
	<li>我是第3条公告</li>
	<li>我是第4条公告</li>
	<li>我是第5条公告</li>
	<li>我是第6条公告</li>
	<li>我是第7条公告</li>
	<li>我是第8条公告</li>
	<li>我是第9条公告</li>
	<li>我是第10条公告</li>
</ul>
<script>
setInterval(function(){
	$('ul').children().first().clone(true).appendTo('ul');
	$('ul>:first').remove();
},1000);
</script>
</body>
</html>

 

效果图:

 

 

 

  • 大小: 23.3 KB
1
0
分享到:
评论

相关推荐

    jQuery滚动公告

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

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

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

    jq文字滚动大全(上下左右及可控)

    上下左右滚动是常见的网页元素动画效果,尤其适用于新闻更新、滚动公告或广告展示。例如,文字从左向右滚动,常用于模拟传统的跑马灯效果;从上到下滚动,则更接近于新闻滚动条的样式。这些效果可以通过jQuery的`...

    公告上下滚动,jq

    这种效果常见于网站的顶部或侧边栏,用于显示滚动公告、通知或新闻更新,能够吸引用户注意力,节省页面空间。 在JavaScript的世界里,jQuery是一个非常流行且功能强大的库,它简化了许多DOM操作、事件处理和动画...

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

    JavaScript代码,可能在`js`文件中,负责实现滚动功能。它首先会绑定事件监听器到左右按钮,当按钮被点击时触发相应的函数。这些函数可能使用jQuery的`.animate()`方法来创建平滑的滚动动画,改变容器的`left`或`...

    jquery 文字向上滚动

    3. **定时器(setTimeout或setInterval)**:用于定时更新文字位置,实现滚动效果。 4. **动画(animate)**:jQuery的动画函数可以平滑地改变元素的属性,如位置、大小等,让滚动看起来更加自然。 5. **事件监听**...

    jquery版文字水平方向无限循环滚动.zip

    这个技术在网页设计中常用于展示新闻标题、广告语或者滚动公告等,能有效利用有限的空间展示更多的内容。 在描述中提到,该效果“无需每一项的宽度固定”,这意味着该jQuery插件具有一定的灵活性,可以适应不同长度...

    jquery新闻公告滚动效果

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

    jQuery实现上下滚动公告栏详细代码

    在前端开发过程中,实现滚动公告栏是常见的需求之一,它能够有效地向用户展示最新的公告信息。本文将详细介绍如何使用jQuery库实现一个上下滚动的公告栏,通过分析具体代码实现,为开发者提供参考。 首先,我们需要...

    jQuery实现公告文字左右滚动的实例代码

    在本文中,我们将深入探讨如何使用jQuery来实现公告文字的左右滚动...为了实现滚动效果,我们需要引入jQuery库。在这个例子中,库的URL是`/source/js/jquery-1.6.2.min.js`,请根据实际情况调整为正确路径: ```html ...

    逐行定期滚动JS代码 基于JQUERY

    这种效果常被用于新闻滚动条、公告栏等场景,以提升用户体验并吸引用户的注意力。 ### 二、基于jQuery实现原理 #### 1. jQuery简介 - **jQuery** 是一个快速、简洁的JavaScript库,使得开发者能够更方便地处理HTML...

    jquery 文字滚动

    **jQuery文字滚动**是一种常见的网页动态效果,常用于新闻更新、公告展示或关键字高亮等场景,通过JS不间断地向上滚动实现信息的自动更新和视觉吸引力。本教程将深入讲解如何利用jQuery库来创建这样的文字滚动效果。...

    jQuery实现公告新闻自动滚屏效果实例代码

    文章标题“jQuery实现公告新闻自动滚屏效果实例代码”揭示了文章的核心内容,即使用jQuery这一流行的JavaScript库,来实现网站上公告新闻区域的自动滚动效果。文章中的实例代码演示了如何通过编写jQuery脚本,使得...

    文字无缝滚动效果代码(jQuery),鼠标经过停下,鼠标移走继续滚动。兼容ie6及主流浏览器

    在实际应用中,这个代码资源可以用于网站的新闻滚动、公告栏或者任何需要动态展示大量文字的场景。开发者可以根据需求调整滚动速度、暂停时间等参数,以适应不同设计风格和用户习惯。 最后,压缩包中的`readme.md`...

    jquery 文字由左向右滚动 走马灯

    现在,我们可以编写jQuery代码来实现滚动效果。一种常见的方法是使用`animate()`函数来改变文本容器的`margin-left`属性,模拟文本的滚动: ```javascript $(document).ready(function() { var marqueeSpeed = 50;...

    仿淘宝抽奖php+jq代码

    1. **跑马灯效果**:跑马灯,也称为滚动公告或滚动条,是网页设计中常用的一种动态展示信息的方式。在抽奖程序中,跑马灯通常用于显示奖项名称或者抽奖规则。在jQuery库中,可以利用`.animate()`方法配合CSS定位来...

    jQuery按钮控制文字上下滚动代码.zip

    在本文中,我们将深入探讨如何使用jQuery来实现一个按钮控制的文字上下滚动效果,这是一个常见的JavaScript特效,常用于网站中的新闻滚动、公告展示等场景。首先,我们先了解一下jQuery库及其基本用法,然后逐步解析...

Global site tag (gtag.js) - Google Analytics