`

简易向上的滚动

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

function marQuee(opts){
	var g = function(id){return "string" == typeof id ? document.getElementById(id) : id;},
		c = function(tagName){return document.createElement(tagName)};
	var o = g(opts.id),
		oParent = g(opts.pid),
		pH = oParent.offsetHeight,
		oH = o.offsetHeight,
		tempNum = pH % oH == 0 ? pH/oH : parseInt(pH/oH)+1,
		time = opts.time || 30,
		wT,
		oTemp = c("div");
	oTemp.id = "oTemp";
	for(var i = 0; i < tempNum; i++){
		oTemp.innerHTML += o.innerHTML;
	}
	oParent.appendChild(oTemp);
	function mq(){
		wT = window.setInterval(function(){
			if(oTemp.offsetTop - oParent.scrollTop <= 0){
				oParent.scrollTop -= o.offsetHeight;
			}else{
				oParent.scrollTop++;
			}
		},time);
	}
	mq();
	oParent.onmouseover = function(){window.clearInterval(wT);};
	oParent.onmouseout = function(){mq()};
}

window.onload = function(){
	marQuee({
		id : "test",
		pid : "outter",
		time : 30
	})
}


</script>

</head>

<body >
<div style="height:200px;overflow:hidden;background:#999999;width:400px;border:1px solid black" id="outter">
	<div id="test">
		1111111<br/>222222222<br/>33333333333<br/>44444444444<br/>55555555555<br/><img src='http://www.baidu.com/img/baidu_sylogo1.gif'/>
	</div>
</div>
</body>
</html>

分享到:
评论

相关推荐

    visual c++ vc制作电影星球大战开头金子塔滚动字幕效果 非常酷.zip

    这个效果是通过编程技术来模拟电影开场时那种文字从屏幕底部向上滚动,逐渐消失在顶部的视觉效果。在实际的编程实践中,这涉及到图形用户界面(GUI)的设计、事件处理以及自定义控件的创建。 首先,从提供的文件...

    16×16点阵(滚动显示)

    中断服务程序可以根据计数器的值来决定是向上滚动、向下滚动还是左右滚动。 4. **硬件接口**: - 16×16点阵通常通过串行或并行接口连接到单片机。并行接口直接连接所有像素点,速度快但占用更多I/O口;串行接口如...

    每三秒滚一次代码JQ

    `setInterval`函数每三秒调用一次内部的匿名函数,该函数会检查代码是否已滚动到底部,如果未到底则增加`scrollTop`值,从而实现向上滚动的效果。 标签“滚动代码”和“JQ”进一步强调了这个话题是关于使用jQuery...

    Xamarin 简易知乎日报客户端

    在这个客户端中,通过监听ListView的滑动事件,实现当用户向上滑动时取消正在进行的加载操作。这种设计可以优化用户体验,避免在用户不需要更多内容时浪费网络资源。 2. **静止异步加载**:为了提高用户体验,...

    list分页上下页翻页

    标题"list分页上下页翻页"所指的就是如何在ListView中实现分页加载功能,使得用户可以向上滚动加载历史数据,向下滚动加载更多新数据。描述中的"简单实现ListView分页上下翻页分页效果,简单容易修改"则强调了这种...

    文本框显示,简易聊天窗口左右显示 C#winform

    - 为了方便用户查看历史记录,可以添加滚动条或提供“向上滚动”、“向下滚动”的功能。 - 考虑添加消息提示音效,增强交互体验。 7. **代码示例**: ```csharp private void button1_Click(object sender, ...

    刚体纯滚动时静摩擦力方向判定及其影响因素 (2009年)

    在纯滚动的条件下,如果刚体获得了顺时针的角加速度,那么静摩擦力必然与角加速度的方向相反,即沿斜面向上。这说明静摩擦力在阻止刚体相对于接触面产生滑动的趋势。这种判别方法的关键在于能够准确判断出刚体的角加...

    Android-FileBrowser简易文件浏览器app

    【Android-FileBrowser简易文件浏览器app】是一款专为Android平台设计的轻量级文件管理应用。这个项目的主要目标是提供一个简洁、易于使用的界面,让用户能够方便地浏览、操作手机或设备上的文件和目录。在Android...

    js跑马灯代码(自写)

    它首先判断滚动元素的`offsetTop`与滚动容器的`scrollTop`的差值是否小于等于0,如果是,则表示滚动文本已经滚动到了顶端,这时通过减少`scrollTop`来实现文本向上滚动。如果差值大于0,则表示文本未滚动到顶端,...

    JS库之Waypoints的用法详解

    如果是向上滚动,则移除该类。此外,通过传递一个对象作为第二个参数到`.waypoint()`方法,可以设置一个偏移量,这表示元素距离视口顶部到达指定位置时才会触发事件。在示例中,我们设置的偏移量为视口高度的50%。 ...

    电梯控制电路设计.doc

    利用LED和计数器,可以实现箭头的滚动显示,指示电梯向上或向下运行,同时配合定时器实现特定的显示循环。 在完成以上各个模块设计后,学生需要将它们整合到一起,形成完整的电梯控制原理图,并撰写课程设计报告,...

    led点阵电子显示屏制作

    显示内容可以平滑地向上滚动,且滚屏速度可实现3级键控。 ##### 2.2 发挥部分 - **温度检测**:具备实时温度检测功能,可在显示屏中心位置显示温度(格式为“XX℃”),绝对误差不超过1℃。 - **显示方向不变**:...

    现场急救的基本知识和具体分析及方法

    其中,海姆利希法尤其适用于无法自行咳嗽的患者,通过快速向上、向内冲击腹部,促使肺部残留空气排出,可能帮助排出气道中的异物。 心肺复苏是针对心跳呼吸骤停的关键措施。脑细胞对缺氧的反应非常敏感,心跳停止后...

    仿QQ卷帘菜单.rar

    易语言,全称“简易编程语言”,是中国自主研发的一款编程工具,以简单易学为特点,支持多种操作系统平台。在易语言中,开发者可以快速构建应用程序,并实现丰富的图形用户界面。仿QQ卷帘菜单的设计,正是利用了...

    电脑各键的作用

    - Ctrl+Shift+Tab:向上切换标签页。 - Ctrl+Shift+Enter:自动补全域名,并进行搜索。 - Alt+1-9:在收藏夹中快速选择第1至9个收藏项。 - End:滚动到窗口底部。 - Home:滚动到窗口顶部。 - NUMLOCK+数字键盘的...

    js实现简单抽奖功能

    使用`Math.random()`函数生成0到1之间的随机数,然后通过乘以7并向上取整得到1到7之间的随机整数。这用于决定抽奖结果。例如: ```javascript var n = Math.floor(Math.random() * 7 + 1); ``` 这段代码会生成...

    物流英语仓储专题PPT课件.pptx

    9. 滚筒式输送机(roller conveyor):由一系列滚动轴组成,用于连续输送货物,常用于生产线或包装线。 10. 盘式输送机(带)(tray conveyor):采用皮带或链条作为传送媒介,适合承载各种形状和尺寸的货物。 11....

    电脑键盘上每个键的作用

    67. **Ctrl+Shift+Tab - 向上切换标签**:在打开的标签页之间向上切换。 68. **Ctrl+Shift+Enter - 域名自动完成**:在地址栏中输入域名时自动补全。 资源管理器中的快捷键: 69. **END - 底端**:滚动到当前窗口...

    计算机键盘[所有]快捷键.doc

    - **CTRL+Shift+Tab**:向上切换标签页。 - **CTRL+Shift+Enter**:在地址栏中完成域名并回车访问。 在资源管理器中,还有以下快捷键: - **END**:滚动到当前窗口的底部。 - **HOME**:滚动到当前窗口的顶部。 ...

    易语言-易编辑框 版本82

    051eedit1添加简易自动提示和跳转到指定行号.e 052eedit1增加了删除和表格粘贴.e 053eedit1修复了跳转到指定行不显示插入符问题,修复了内容为空崩溃的问题.e 054eedit1添加词法分析之前.e 055eedit1优化调整插入符...

Global site tag (gtag.js) - Google Analytics