条目滚动显示

最新推荐文章于 2023-08-24 15:37:39 发布
最新推荐文章于 2023-08-24 15:37:39 发布
阅读量222 收藏
点赞数 1
分类专栏： Java script 
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
	.container{ width: 500px; margin: 60px auto; }
	.infoBox{ width:100%; height: 240px; overflow: hidden;}
	.list-group{ margin-bottom: 0; border-radius:0;}
	.list-group li{  border-radius:0 !important; }
	.list-group li:last-child{  border-bottom:0 !important; }
</style>
</head>
<body>
	<div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title">公告信息</div>
            </div>
            <div class="panel-body">
                <div class="infoBox" id="infoBox">
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">1、关于2016年新生入学的通知01</a></li>
                        <li class="list-group-item"><a href="#">2、关于2016年新生入学的通知02</a></li>
                        <li class="list-group-item"><a href="#">3、关于2016年新生入学的通知03</a></li>
                        <li class="list-group-item"><a href="#">4、关于2016年新生入学的通知04</a></li>
                        <li class="list-group-item"><a href="#">5、关于2016年新生入学的通知05</a></li>
                        <li class="list-group-item"><a href="#">6、关于2016年新生入学的通知06</a></li>
                    </ul>
                </div>            
            </div>
        </div>
    </div>
</body>
<script>
	window.onload=function(){
		var oInfobox=document.getElementById('infoBox'),
			speed=60, //设置速度
			timer=null; //设置定时器
		oInfobox.innerHTML+=oInfobox.innerHTML; //复制一份内容，无缝滚动
		timer=setInterval(scrollUp,speed);
		function scrollUp(){
			oInfobox.scrollTop=oInfobox.scrollTop+1;
			if(oInfobox.scrollTop>=oInfobox.offsetHeight){ 
				//判断元素的滚动高度大于元素本身的高度时，把滚动高度瞬间拉回
				oInfobox.scrollTop=0;
			}
		}
		oInfobox.onmouseover=function(){
			clearInterval(timer)
		}
		oInfobox.onmouseout=function(){
			timer=setInterval(scrollUp,speed);
		}
	}
</script>
<script>
	window.onload=function(){
		var oInfobox=document.getElementById('infoBox'),
			oHeight=41,//设置间隔滚动高度
			speed=20, //设置速度
			timer01=null; //设置setInterval定时器
			timer02=null; //设置setTimeout定时器

		oInfobox.innerHTML+=oInfobox.innerHTML; //复制一份内容，无缝滚动

		function startMove(){
			oInfobox.scrollTop++;
			timer01=setInterval(scrollUp,speed);
		}
		function scrollUp(){
			if(oInfobox.scrollTop%oHeight==0){
				clearInterval(timer01);
				timer02=setTimeout(startMove,1000);
			}else{
				oInfobox.scrollTop++;
				if(oInfobox.scrollTop>=oInfobox.offsetHeight){ 
					//判断元素的滚动高度大于元素本身的高度时，把滚动高度瞬间拉回
					oInfobox.scrollTop=0;
				}
			}
		}
		startMove();
		oInfobox.onmouseover=function(){
			clearInterval(timer01);
			clearTimeout(timer02);
		}
		oInfobox.onmouseout=function(){
			timer01=setInterval(scrollUp,speed);
		}
	}
</script>
</html>

转：https://www.cnblogs.com/lvmylife/p/5310272.html

绛门人
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
滚动显示
BL1309639668的博客
02-21 476
滚动显示 要做的效果如下：滚动页面到一定位置显示出要显示的东西 首先html部分如下，是一张张img图片，滚动到一定位置图片会一个个逐一显示 Css部分如下，给图片设置一下位置，居中，接着把图片用opacity设置为0隐藏，再给它一个过渡 效果 接下来js部分，首先绑定一个鼠标滚轮事件onmousewheel，然后通过变量scrollnum获取当前页面 的滚动条纵坐标位置，接着在给一个判断，判断滚动条位置具体在哪里后显示图片，具体看下图if 语句，if语句里的函数scrolllording 看下半部分
Jquery实现图片列表横向和纵向不间断滚动插件实例源码
12-28
Jquery实现图片列表横向和纵向不间断滚动插件实例源码，供大家一起参考学习。
better-scroll使用（横向滚动条轮播）
zhangyubababa的博客
01-26 709
横向滚动条除了要引入这个插件以外， 容器也要设置css属性 <template> <div class="box"> <!-- 横向滚动条 --> <div class="recommand-wrap" ref="wrapper"> <!-- /* 这里是父盒子*/ --> <ul class="cont" ref="cont"> <!-- /* 这里是子盒子，
前端基础之滚动显示
if_smile的博客
08-24 982
这里用到了jquery的animate动画，核心代码，元素动画上移后把第一个追加到最后一个。因为使用的滚动条，当文本到底后滚动条也就到底了，所以我们需要先把文本拼接长，两倍即可。首先获取ul元素，然后定时任务进行自增scrollTop的值，实现文本滚动效果。这样滚动到到二倍长度就会停止不动了，所以我们需要把scrollTop置0。代码还有需要优化，当文本不超过容器高度的时候也会进行滚动，需要增加一个判断。scrollTop：滑动滚动条，使用定时任务改变滚动条的值进行动态滚动。scroll：一圈一圈的走。
OLED滚动显示
junseven164的博客
11-21 7728
少年一、滚动显示介绍1.1 具体介绍1.2 水平滚动命令1.3 垂直滚动命令二、代码模块三、显示效果四、总结五、参考资料 一、滚动显示介绍 1.1 具体介绍 SSD1306(OLED驱动芯片)指令详解 1.2 水平滚动命令 OLED_WR_Byte(0x2E,OLED_CMD); //关闭滚动 OLED_WR_Byte(0x26,OLED_CMD); //水平向左或者右滚动 26/27 OLED_WR_Byte(0x00,OLED_CMD); //虚拟字节 OL
RecyclerView滚动指定条目并在页面中居中
08-02
当我们需要实现一个功能，比如用户点击按钮后滚动到某个特定条目并使其居中显示时，就需要用到RecyclerView的相关API和技巧。以下将详细讲解如何实现这一需求。 首先，我们需要了解RecyclerView的核心组件：`...
ListView根据条件隐藏显示条目
11-15
本示例"ListView根据条件隐藏显示条目"涉及到的关键技术点包括ListView的使用、动态数据绑定、事件监听以及自定义Adapter。 1. **ListView基本使用**： - ListView是Android中用于展示长列表的视图控件，它具有...
CListCtrl 标题 条目 滚动条定制
08-05
在本示例中，我们主要探讨如何对`CListCtrl`进行定制，特别是修改标题、条目和滚动条。 首先，标题的定制涉及到设置列头的文本和样式。你可以通过调用`InsertColumn`函数来添加列，并传入列标题。如果想改变颜色，...
android ListView自动滚动方法
09-05
这样配置后，每当ListView的数据源（通常是Adapter）添加新条目时，ListView会自动滚动到新增内容的底部，保持最新消息始终可见。 但是请注意，自动滚动功能并不意味着在运行时会立即生效。你需要确保在程序逻辑中...
横向滚动table列表
07-09
3. **侧滑滚动**：这个标签可能指的是在横向滚动列表中，用户可以通过向左或向右滑动条目来进行操作，例如删除、标记为已读等。这种交互方式常见于邮件应用或者其他需要快速处理项目的应用中。 4. **实现方法**： ...
20行代码让你的网页内容随意滚动
08-05
20行代码让你的网页内容随意滚动
htmL页面滚动显示特效动画
09-28
html滚动到可视区域显示隐藏特效动画，适合新手研究开发
JS实现页面数值滚动显示
隔壁老方的博客
11-03 8002
js数据滚动
HTML 滚动条实现
weixin_33744854的博客
04-02 2688
##在对应的div中，添加overflow,固定高度为400px<div class="panel-body" style="height: 400px; overflow:scroll"> <div style="border: 1px #000000; width: 90%; margin: 0 auto;"> &lt...
实现无缝滚动与间歇性无缝滚动
王朝虎的博客
02-06 8876
这篇blog是使用html与js实现无缝滚动与间歇性无缝滚动，首先，先看一下效果图：     这种效果，在网站中经常见到，下面，我们实现这个效果。首先，这里有以下知识点：setInterval("表达式",周期时间);    这里给大家贴一张w3c上对setInterval的介绍，用法都很清楚： clearInterval(id_setInterval);setInterval()与clearI
ArcGIS Engine编程初学至精通指南
最新发布
07-23
《ArcGIS Engine开发从入门到精通》是一套全面讲解GIS技术与ArcGIS Engine应用的教程。ArcGIS Engine是由Esri公司推出的强大地理信息系统开发平台，它允许开发者利用.NET、Java等编程语言创建桌面、Web及移动GIS应用程序。本教程旨在帮助初学者和有一定经验的GIS从业者快速掌握ArcGIS Engine的核心技术和实际应用。 1. **GIS基础概念**：我们需要理解什么是GIS（Geographic Information System，地理信息系统），它是如何整合地理位置数据和属性数据，以及如何通过地图进行数据的可视化和分析。 2. **ArcGIS Engine介绍**：ArcGIS Engine是Esri GIS技术栈的一部分，提供了丰富的GIS组件，包括地图显示、图层管理、地理处理工具、查询功能等，用于构建自定义的GIS应用。 3. **开发环境配置**：讲解如何设置开发环境，包括安装ArcGIS Engine SDK，集成开发环境（如Visual Studio）的配置，以及必要的开发工具和库的添加。 4. **基础控件与组件
Android ListView详解：实现组件滚动显示
使用ListView的好处在于，即使列表内容非常多，也能流畅地滚动，因为ListView会复用已创建的视图，避免一次性加载所有条目导致的性能问题。ListView的使用主要包括以下几个步骤： 1. 创建XML布局文件：首先，你需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值