`
领悟人生
  • 浏览: 85006 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript 向上滚动公告、水平滚动公告(翻页效果)

公告JavaScriptEXTUPHTML 
阅读更多
最近做项目时，公司要在Ext的ToolBar中添加个滚动公告栏，不但要向上滚动，而且可以向左滚动。滚动方向可以由用户选择。

以下是在Ext平台下运行的，UICtrl.StatusBarNoNotice 返回个TextItem。可以直接添加到Toolbar的Items中，进行测试。 
UICtrl.StatusBarNoNotice = function() {

	var noticeArray = [];
	// [id,title]
	noticeArray.push(["100", "部门周例会会议通知1"]);
	noticeArray.push(["200", "部门周例会会议通知2"]);
	noticeArray.push(["300", "部门周例会会议通知3"]);
	noticeArray.push(["400", "部门周例会会议通知4"]);
	noticeArray.push(["500", "部门周例会会议通知5"]);

	var total = noticeArray.length;// 公告数量

	// 公告栏
	var noticeTxt = new Ext.Toolbar.TextItem({
				id : 'noticeTxt',
				text : noticeArray[0][1]
			});

	if (noticeArray.length == 0)
		noticeArray.push(["-1", "今天没有公告"]);

	/***************************************************************************
	 * 公告栏 start
	 */
	var marqueeInterval = new Array();
	var marqueeId = 0;
	var marqueeDelay = 3000;// 停顿时间 (ms)
	var marqueeHeight = 16; // 公告栏高度
	var marqueeWidth = 300;// 公告栏宽度
	var dir = Sys.agentInfo.noticeScrollDir;// 滚动方向up/left up为向上滚动，left为向左滚动
	var separator = "    ●    ";

	if (dir == "left")
		leafscroll();
	else
		upscroll();

	/**
	 * 向左滚动
	 */
	function leafscroll() {
		var str = "";
		if (noticeArray[0][0] == "-1")
			return;
		for (var i = 0; i < noticeArray.length; i++) {
			str += separator;
			var item = '<a onclick="new UICtrl.ShowNoNotice('
					+ String(noticeArray[i][0]) + ')" style="cursor:pointer;">'
					+ noticeArray[i][1] + '</a>';
			str += item;
		}

		noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
				+ marqueeHeight
				+ 'px;width:'
				+ marqueeWidth
				+ 'px;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'
				+ str + '</div><div id="notice2" style="float:left;">' + str
				+ '</div></div></div>';
		if (document.getElementById("noticeTxt")) {
			var noticeText = document.getElementById("noticeTxt");
			noticeText.innerHTML = noticeDiv;
		} else
			noticeTxt.text = noticeDiv;

		var mytask = new Ext.TaskMgr.start({
					run : function() {
						var noticeText = document.getElementById("noticeTxt");
						// noticeText.innerHTML = noticeDiv;

						var dir1 = Sys.agentInfo.noticeScrollDir;
						if (dir1 == "up") {
							noticeText.innerHTML = "";
							Ext.TaskMgr.stop(mytask);
							upscroll();
							return;
						}
						var marqueeBox = document.getElementById("marqueeBox");
						var notice1 = document.getElementById("notice1");
						var notice2 = document.getElementById("notice2");

						if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)
							marqueeBox.scrollLeft -= notice1.offsetWidth
						else {
							marqueeBox.scrollLeft++;
						}
						marqueeBox.onmouseover = function() {
							Ext.TaskMgr.stop(mytask);
						};
						marqueeBox.onmouseout = function() {
							Ext.TaskMgr.start(mytask);
						};
					},
					interval : 10
				});
	}

	/**
	 * 向上滚动
	 */
	function upscroll() {
		var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("
				+ noticeArray[0][0] + ");' style='cursor:pointer;'>"
				+ noticeArray[0][1] + "</a>";
		if (noticeArray[0][0] == "-1")
			str = noticeArray[0][1];
		else
			marqueeId++;

		noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
				+ marqueeHeight + 'px;width:' + marqueeWidth + 'px;"><div>'
				+ str + '</div></div>';

		if (document.getElementById("noticeTxt")) {
			var noticeText = document.getElementById("noticeTxt");
			noticeText.innerHTML = noticeDiv;
		} else
			noticeTxt.text = noticeDiv;

		marqueeInterval[0] = new Ext.TaskMgr.start({
			run : function() {
				var dir1 = Sys.agentInfo.noticeScrollDir;

				var noticeText = document.getElementById("noticeTxt");

				if (dir1 == "left") {
					noticeText.innerHTML = "";
					Ext.TaskMgr.stop(marqueeInterval[0]);
					Ext.TaskMgr.stop(marqueeInterval[1]);
					leafscroll();
					return;
				}
				var marqueeBox = document.getElementById("marqueeBox");

				if (noticeArray[marqueeId])
					var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("
							+ noticeArray[marqueeId][0]
							+ ");' style='cursor:pointer;'>"
							+ noticeArray[marqueeId][1] + "</a>";

				if (noticeArray[0][0] == "-1")
					str = noticeArray[0][1];

				marqueeId++;
				if (marqueeId >= noticeArray.length)
					marqueeId = 0;

				if (marqueeBox.childNodes.length == 1) {
					var nextLine = document.createElement('DIV');
					nextLine.innerHTML = str;
					nextLine.style.width = marqueeWidth;
					marqueeBox.appendChild(nextLine);
				} else {
					marqueeBox.childNodes[0].innerHTML = str;
					marqueeBox.appendChild(marqueeBox.childNodes[0]);
					marqueeBox.scrollTop = 0;
				}
				marqueeBox.onmouseover = function() {
					Ext.TaskMgr.stop(marqueeInterval[0])
				}
				marqueeBox.onmouseout = function() {
					Ext.TaskMgr.start(marqueeInterval[0]);
				}
				// /marqueeBox.onclick = function() {
				// /new UICtrl.ShowNoNotice();
				// /}
				if (marqueeInterval[1])
					Ext.TaskMgr.stop(marqueeInterval[1]);
				marqueeInterval[1] = new Ext.TaskMgr.start({
					run : function() {
						var marqueeBox = document.getElementById("marqueeBox");
						marqueeBox.scrollTop++;
						if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
							Ext.TaskMgr.stop(marqueeInterval[1]);
						}
					},
					interval : 20
				});
			},
			interval : 3000
		});
	}
	return [noticeTxt];
}


今天下班没有什么干，于是将上面的Ext的滚动公告功能做了一些修改。做成一个纯JS的版本。
以下是js的版本代码: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滚动公告(横向/纵向)</title>

</head>
<body style="margin: 5px;">
<div>
	<button onclick="left()">横向滚动</button>
	<button onclick="up()">纵向滚动</button>
</div>
<div id="noticeBar">notice</div>
<hr>
<script type="text/javascript" language="javascript">
var noticeArray = [];
//[id,title]
noticeArray.push( [ "100", "部门周例会会议通知1" ]);
noticeArray.push( [ "200", "部门周例会会议通知2" ]);
noticeArray.push( [ "300", "部门周例会会议通知3" ]);
noticeArray.push( [ "400", "部门周例会会议通知4" ]);
noticeArray.push( [ "500", "部门周例会会议通知5" ]);

var total = noticeArray.length;// 公告数量

if (noticeArray.length == 0)
	noticeArray.push( [ "-1", "今天没有公告" ]);

/*******************************************************************************
* 公告栏 start
*/
var marqueeInterval = new Array();
var marqueeId = 0;
var marqueeDelay = 3000;// 停顿时间 (ms)
var marqueeHeight = 16; // 公告栏高度
var marqueeWidth = 300;// 公告栏宽度
var dir = 'left';// 滚动方向up/left up为向上滚动，left为向左滚动
var separator = "&nbsp;&nbsp;&nbsp;&nbsp;<font color='#999999'>●</font>&nbsp;&nbsp;&nbsp;&nbsp;";

if (dir == "left")
	leafscroll();
else
	upscroll();

/**
* 向左滚动
*/
function leafscroll() {
	var str = "";
	if (noticeArray[0][0] == "-1")
		return;
	for ( var i = 0; i < noticeArray.length; i++) {
		str += separator;
		var item = '<a onclick="alert(' + String(noticeArray[i][0])
				+ ')" style="cursor:pointer;">' + noticeArray[i][1] + '</a>';
		str += item;
	}

	noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
			+ marqueeHeight
			+ 'px;width:'
			+ marqueeWidth
			+ 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'
			+ str + '</div><div id="notice2" style="float:left;">' + str
			+ '</div></div></div>';

	var noticeBar = document.getElementById("noticeBar");
	noticeBar.innerHTML = noticeDiv

	marqueeInterval[3] = window.setInterval(LeftStartFn, 10);

	function LeftStartFn() {
		if (dir == "up") {
			noticeBar.innerHTML = "";
			window.clearInterval(marqueeInterval[3]);
			upscroll();
			return;
		}
		var marqueeBox = document.getElementById("marqueeBox");
		var notice1 = document.getElementById("notice1");
		var notice2 = document.getElementById("notice2");

		if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)
			marqueeBox.scrollLeft -= notice1.offsetWidth
		else {
			marqueeBox.scrollLeft++;
		}
		marqueeBox.onmouseover = function() {
			window.clearInterval(marqueeInterval[3])
		};
		marqueeBox.onmouseout = function() {
			marqueeInterval[3] = window.setInterval(LeftStartFn, 10)
		};
	}
}

function upscroll() {
	var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("
			+ noticeArray[0][0] + ");' style='cursor:pointer;'>"
			+ noticeArray[0][1] + "</a>";
	if (noticeArray[0][0] == "-1")
		str = noticeArray[0][1];
	else
		marqueeId++;

	noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
			+ marqueeHeight
			+ 'px;width:'
			+ marqueeWidth
			+ 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div>'
			+ str + '</div></div>';

	var noticeBar = document.getElementById("noticeBar");
	noticeBar.innerHTML = noticeDiv

	marqueeInterval[0] = window.setInterval(upStartFn, 3000);

	function upStartFn() {

		if (dir == "left") {
			noticeBar.innerHTML = "";
			window.clearInterval(marqueeInterval[0]);
			window.clearInterval(marqueeInterval[1]);
			leafscroll();
			return;
		}
		var marqueeBox = document.getElementById("marqueeBox");

		if (noticeArray[marqueeId])
			var str = "<a onclick='javascript:alert("
					+ noticeArray[marqueeId][0]
					+ ");' style='cursor:pointer;'>"
					+ noticeArray[marqueeId][1] + "</a>";

		if (noticeArray[0][0] == "-1")
			str = noticeArray[0][1];

		marqueeId++;
		if (marqueeId >= noticeArray.length)
			marqueeId = 0;

		if (marqueeBox.childNodes.length == 1) {
			var nextLine = document.createElement('DIV');
			nextLine.innerHTML = str;
			nextLine.style.width = marqueeWidth;
			marqueeBox.appendChild(nextLine);
		} else {
			marqueeBox.childNodes[0].innerHTML = str;
			marqueeBox.appendChild(marqueeBox.childNodes[0]);
			marqueeBox.scrollTop = 0;
		}
		marqueeBox.onmouseover = function() {
			window.clearInterval(marqueeInterval[0])
		}
		marqueeBox.onmouseout = function() {
			marqueeInterval[0] = window.setInterval(upStartFn, 3000);
		}

		if (marqueeInterval[1])
			window.clearInterval(marqueeInterval[1]);
		marqueeInterval[1] = window.setInterval(scrollFn, 10);
	}

	function scrollFn() {
		var marqueeBox = document.getElementById("marqueeBox");
		marqueeBox.scrollTop++;
		if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
			window.clearInterval(marqueeInterval[1]);
		}
	}
}
function left() {
	dir = 'left';
}

function up() {
	dir = 'up';
}
</script>
</body>
</html>
2
顶
0
踩
分享到：
| Ext grid 单元格数据可被 选中和复制
评论
1 楼 stephansun 2011-08-02  
有才！谢谢！很有用！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery文本向上滚动代码带上下翻转按钮的jQuery插件

    总结，创建一个jQuery文本向上滚动代码带上下翻转按钮的插件涉及到理解jQuery库的基本操作、插件开发模式、事件监听以及动画效果的实现。通过以上步骤，你可以构建一个具有用户交互性的文本滚动组件，增强网页的动态...

    不间断向上滚动代码.rar

    "不间断向上滚动代码"是一种常见的网页动画效果，也称为无限滚动或自动滚动。这种效果使得网页内容能够持续不断地从底部向顶部滚动，创造出一种连续、无缝的浏览体验，常用于新闻网站、社交媒体和产品展示页面，以便...

    无缝垂直向上滚动

    【无缝垂直向上滚动】是一种常见的网页动态效果，它主要用于展示一串连续的信息，如新闻标题、广告或菜单项，通过不间断地向上滚动，使用户能够查看到更多的内容而无需手动翻页。这种效果在网站设计中被广泛应用，...

    h5下拉刷新上拉加载滚动条位置

    这通常可以通过JavaScript来实现，监听页面的`beforeunload`或`unload`事件，存储滚动位置到本地存储（localStorage或sessionStorage）。 5. **实现技术**：在H5中，可以使用`window.pageYOffset`或`document....

    多种常用滚动效果jquery插件.zip

    在这个例子中，`#scrollingText`是待滚动元素的选择器，`direction:'up'`表示向上滚动，`speed:50`则是滚动速度的设定。 此外，jQuery插件通常具有良好的文档支持，开发者可以在查阅插件的官方文档或示例代码后，...

    移动端下拉翻页效果

    例如，可以改变页面容器的`transform: translateY()`值，模拟页面向上滚动的效果，同时设置合适的`transition-duration`让动画自然过渡。 5. **性能优化**：为了保证在低端设备上的流畅性，需要考虑性能优化。比如...

    JavaScript广告类特效大全

    JavaScript结合CSS3的变换（transform）和过渡（transition）属性，可以创建平滑的3D翻页效果。 5. **向上滚动的展示广告**：当用户向下滚动页面时，广告从顶部向上滑入视区。这需要监听滚动事件，根据滚动距离计算...

    收集几款图片滚动代码（横向、竖向、停顿、文字结合等）.

    在IT领域，图片滚动是一种常见的网页动态效果，用于展示多张图片或信息，提升用户体验。在给定的标题和描述中，“收集几款图片滚动代码（横向、竖向、停顿、文字结合等）”表明这是一个关于不同类型的图片滚动效果的...

    jq实现文字滚动到那一屏幕

    "jq翻页滚动"这个标签进一步明确了主题，指的是可能使用jQuery来实现页面的翻页滚动效果，这种效果通常用于模拟书籍翻页或幻灯片展示，让用户在浏览时有更自然的阅读体验。 从压缩包的文件名来看，我们有以下几个...

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\

    通过设定合适的滚动速度和间隔，可以使得文字以翻页的形式逐行滚动，既保留了信息的完整性，又不失动态效果。 MSClass的另一个亮点是文字间歇滚动。不同于传统的连续滚动，间歇滚动在每次滚动之间设定一定的间隔...

    滚屏（图片不间断滚动）通用不间断滚动JS封装类

    翻屏滚动是指在固定的高度或宽度内，图片从一端移动到另一端，形成翻页的效果。这通常需要对图片进行裁剪，并在滚动过程中适时加载下一帧，以保持平滑过渡。CSS3的`transform`属性和`transition`属性在这里起到关键...

    jQuery滚动效果插件 Waypoints.zip

    3. **上下滚动支持**：不仅支持正常的向下滚动，还支持向上滚动时触发事件，使设计更为灵活。 4. **多个方向**：除了水平和垂直滚动外，Waypoints还支持元素的进入和离开视口的检测。 5. **无需精确定位**：无需...

    移动端H5上下滑屏翻页demo

    总的来说，这个H5 demo提供了一种实现移动端上下滑屏翻页效果的方法，它具有良好的可扩展性和自适应性，可以帮助开发者快速构建响应式的移动端网页。对于想要学习或使用此类功能的人来说，这是一个有价值的资源。...

    js实现数字滚动特效

    通过调整每个数字`&lt;div&gt;`的垂直位置，可以模拟出数字向上滚动的效果。 总的来说，JavaScript 实现数字滚动特效是通过创建动态的HTML结构，结合CSS的隐藏溢出特性，以及JavaScript定时更新和控制元素位置来实现的。...

    javascript完全学习手册1 源码

    14.2.3 展示翻页效果 416 14.2.4 展示缩略图新闻效果 419 14.2.5 图片滑动效果 423 14.2.6 三维相册 433 14.3 时间特效 442 14.3.1 时钟提示自动关闭 442 14.3.2 日历生成器 444 14.4 窗口特效 450 14.4.1 窗口拖动 ...

    鼠标滑动翻页demo

    在网页设计和开发中，"鼠标滑动翻页"是一种常见的...通过监听滚动事件，判断翻页条件，结合CSS动画，我们可以创建出流畅的滑动翻页效果。在实际开发中，还需要考虑到兼容性和性能优化，确保在各种环境下都能稳定运行。

    使用原生JS实现滚轮翻页效果的示例代码

    在本文中，我们将深入探讨如何使用原生JavaScript实现滚轮翻页效果，这是一个常见的交互功能，常见于全屏切换或幻灯片展示中。我们首先会解析滚轮事件及其相关属性，然后分析提供的示例代码，最后理解并解释节流函数...

    js带按钮的九宫格图片轮播滚动代码

    在JavaScript编程领域，"js带按钮的九宫格图片轮播滚动代码"是一个常见的应用场景，主要涉及网页动态展示和交互设计。这样的功能通常用于产品展示、图像广告或用户界面的创新设计。以下将详细讲解这一知识点的相关...

    jQuery实现的活动内容鼠标点击上下滚动切换特效源码.zip

    // 向上滚动50像素 } else if (event.target.id === "downButton") { // 假设downButton是向下翻页的按钮 $(this).animate({ scrollTop: currentScroll + 50 }, 'slow'); // 向下滚动50像素 } }); ``` 在这个...

Magicbox
Global site tag (gtag.js) - Google Analytics