`
lym6520
  • 浏览: 705777 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

JavaScript实现消息动态循环

    博客分类:
  • JS
阅读更多
<html>

<head>

<title></title>
<link rel="stylesheet" type="text/css" href="placard.css">
</head>

<body>
<div class="ct_BAB" align = "center">
	<div class="ct_BABA">
		<div class="ct_BABAA">
				<div class="ct_BABABAA"></div>
				<div class="ct_BABABAB">
					我的博客文章
				</div>
		</div>
		<div class="ct_BABAB"> 
			<div id="placardContent" class="ct_BABABB">								
			</div>
			<div id="placardTemp" style="display:none;">
				<div id="0placardItem" >
					<a target="_blank" href="#">1. hibernate返回一个实际的类型安全java对象时遇到的错误</a><br>
				</div>
				<div id="1placardItem" >
					<a target="_blank" href="#">2. java 日期处理</a><br>
				</div>
				<div id="2placardItem" >
					<a target="_blank" href="#">3. linux挂载windows上的共享文件</a><br>
				</div>
				<div id="3placardItem" >
					<a target="_blank" href="#">4. 执行hql参数多余错误</a><br>
				</div>
				<div id="4placardItem" >
					<a target="_blank" href="#">5. JQUERY对页面属性的选择控制(整理)</a><br>
				</div>
				<div id="5placardItem" >
					<a target="_blank" href="#">6. Lucene相关资料</a><br>
				</div>
				<div id="6placardItem" >
					<a target="_blank" href="#">7. 自己写了个Hessian</a><br>
				</div>
		</div>
		<script type="text/javascript">
			var placartItemCount = new Number(0);//公告总数
			placartItemCount = document.getElementById("placardTemp").getElementsByTagName("a").length;
			var currentIndex = new Number(0);//当前的第一条公告位置
			var displayCount = new Number(3);//定义公告显示个数
			/**
			*	动态滚动公告信息
			**/
			function placardDisplay(){
				if(currentIndex == placartItemCount)
					currentIndex = 0;
					
				var str = "";
				var marignCount = placartItemCount-currentIndex;
				
				for(var i = currentIndex; i < placartItemCount; i++){
					var id = i + "placardItem";
					str += document.getElementById(id).innerHTML;
					if((i - currentIndex) == (displayCount-1))	
						break;									 									 
				}	
				
				if(marignCount < displayCount){
					for(var j = 0; j < (displayCount - marignCount); j++){
				 		id = j + "placardItem";
				 		str += document.getElementById(id).innerHTML;	
				 	}
				 }
				document.getElementById("placardContent").innerHTML = str;	
				currentIndex++;				    
			}  	
			
			placardDisplay();
			
			if(placartItemCount > displayCount)						  
				setInterval(placardDisplay,3000); //每三秒执行一次
		</script>
	</div>
	<div class="ct_BABAC"></div>
</div>
</body>

</html>

2
0
分享到:
评论
2 楼 lym6520 2009-04-28  
bug修改:增加条件

if(marignCount < displayCount){  
                    for(var j = 0; j < (displayCount - marignCount); j++){  
                        id = j + "placardItem";  
                        str += document.getElementById(id).innerHTML;     
                    }  
                 }
改为:
if(marignCount < displayCount && placartItemCount > displayCount){
for(var j = 0; j < (displayCount - marignCount); j++){
id = j + "placardItem";
str += document.getElementById(id).innerHTML;
}
}
1 楼 lym6520 2009-04-23  
对a标签加入事件:
onmouseover="clearTimeout(iTimeoutId);"
onmouseout="iTimeoutId = setInterval(placardDisplay,3000);"

修改:setInterval(placardDisplay,3000); //每三秒执行一次
为:
var iTimeoutId = setInterval(placardDisplay,3000); //每三秒执行一次

当鼠标移到文字上方时停留,移开时开始循环。

相关推荐

    【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx

    本文将深入探讨如何使用antd-vue和Vue实现动态验证循环属性的表单,满足以下需求: 1. **名称**、**对比项**和**备注**字段为必填项,初始默认为一行,支持用户添加多行。 2. 当**名称**更改时,自动清空当前行的**...

    javascript实现无缝循环

    JavaScript 实现无缝循环是前端开发中的一个常见需求,特别是在创建动态效果如轮播图时。无缝循环的关键在于创造一种视觉上的连续性,使得用户无法察觉到内容切换的断点。以下我们将深入探讨如何利用 JavaScript 来...

    javascript实现的动态日历

    在本案例中,"javascript实现的动态日历"是一个利用JavaScript编写的交互式日历组件,它可以无缝集成到基于JSP(JavaServer Pages)或ASP(Active Server Pages)的网页中,为用户提供一个直观、易用的日历功能。...

    javaScript实现的动态轮播图

    在本项目中,我们关注的是如何使用JavaScript实现一个动态轮播图。动态轮播图是网站中常见的一种元素,用于展示多张图片或内容,通过自动播放和用户交互来实现平滑的过渡效果。 首先,我们需要理解轮播图的基本结构...

    html+css+javascript实现列表循环滚动示例代码

    说明:设置时间定时,在规定的时间内替换前一个节点的内容 1、关键代码:javascript: 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById...

    用javascript实现的页面下雪功能

    总的来说,用JavaScript实现的页面下雪功能是一个结合了基本的JavaScript语法、DOM操作、动画原理和随机数生成的综合实例。通过理解和实践这样的项目,开发者可以提升在网页动态效果开发方面的能力,并进一步掌握...

    Javascript实现的SHA-256加密算法完整实例

    JavaScript实现SHA-256加密算法的实例主要涉及以下几个关键部分: 1. **位运算基础**:JavaScript提供了位运算符,包括按位与(&)、按位或(|)、异或(^)、非(~)、左移()和右移(&gt;&gt;)。位运算是SHA-256算法的基石,因为...

    【JavaScript源代码】JavaScript实现循环轮播图.docx

    JavaScript 实现循环轮播图是一种常见的网页动态效果,用于展示多张图片并自动或手动切换。以下是基于给定文件内容的详细知识点解析: 1. **HTML 结构**: HTML 代码提供了轮播图的基本框架,包括外部容器 `#outer...

    javascript实现循环广告条效果

    JavaScript中的循环控制主要通过for循环、while循环或do...while循环来实现,但本文中的示例使用了递增计数器(thisAd++)和判断数组长度来实现循环,即if(thisAd==adImages.length){thisAd=0;}这样的条件判断来控制...

    图片动态循环滚动js代码

    【标题】"图片动态循环滚动js代码"是一个用于网页中实现图片轮播效果的JavaScript解决方案。这个技术主要用于提升用户体验,特别是在展示多张图片时,通过动态循环滚动的方式,让用户能够轻松浏览并欣赏到所有图片。...

    JavaScript特效,立体循环.rar

    JavaScript特效在网页设计中起着至关重要的作用,它为用户带来了动态交互的体验,而“立体循环”这一特效则是JavaScript应用中的一个独特亮点。这个压缩包"JavaScript特效,立体循环.rar"显然包含了一个实现立体循环...

    html css javascript实现列表循环滚动示例代码.docx

    html css javascript实现列表循环滚动示例代码.docx

    html+css+javascript如何实现列表循环滚动.docx

    html+css+javascript如何实现列表循环滚动.docx

    html-css-javascript实现列表循环滚动示例代码.doc

    html-css-javascript实现列表循环滚动示例代码.doc

    Pythonrange函数的一个JavaScript实现

    "Python range() 函数的一个JavaScript实现"这个主题,正是探讨如何在 JavaScript 中实现类似 Python 的 `range()` 功能。 Python 的 `range()` 函数是一个非常有用的工具,它用于生成一个整数序列,通常用于循环...

    html+css+javascript实现列表循环滚动示例代码.doc

    html+css+javascript实现列表循环滚动示例代码

    javascript 特效开发含各种实现代码

    JavaScript特效开发是一个涵盖广泛的主题,它涉及到网页动态效果的创建,包括动画、交互式元素以及游戏等。在JavaScript的世界里,特效开发是提升用户体验、吸引用户注意力的重要手段。本资源包"myjs"包含了多种...

    JavaScript动态网页开发详解——JavaScript特效

    在“JavaScript动态网页开发详解——JavaScript特效”这一主题中,我们将深入探讨JavaScript如何实现各种炫酷的网页效果。 一、JavaScript基础 在讨论特效之前,我们需要了解JavaScript的基础。JavaScript语法与...

    JavaScript ,360度循环滚动

    "360度循环滚动"是JavaScript实现的一种特效,常用于展示产品或图片,给用户带来一种独特的视觉体验。 360度循环滚动通常是通过JavaScript控制一组图像按顺序连续播放,营造出物体360度旋转的效果。这个效果可以...

    javascript实现音乐播放器

    首先,HTML5 Audio API是JavaScript实现音乐播放器的基础。Audio对象是核心,通过创建Audio实例,我们可以控制音频的播放、暂停、音量调整等操作。例如: ```javascript var audio = new Audio('path/to/your/audio...

Global site tag (gtag.js) - Google Analytics