js实现页面消息滚动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>autoScroll</title>
</head>
<style>
.parent {
width: 300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
height: auto;
}
.child li {
height: 50px;
margin: 2px 0;
background: #009678;
}
</style>
<body>
<div id="parent" class="parent">
<div id="child1" class="child">
<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>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</div>
<!-- <div id="child2" class="child"></div> -->
</div>
<script type="text/javascript">
(function () {
var parent = document.getElementById('parent');
var child1 = document.getElementById('child1');
setInterval(function () {
console.log(parent.scrollTop,child1.scrollHeight,parent.scrollHeight)
if(parent.scrollTop >= child1.clientHeight-parent.clientHeight) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 20);
})()
</script>
</body>
</html>
js实现页面消息滚动效果的更多相关文章
- Space.js – HTML 驱动的页面 3D 滚动效果
为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- JS学习笔记之页面信息滚动效果
效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- js控制页面每次滚动一屏，和楼梯效果
我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...
- js实现消息滚动效果
<div class="inform" style=""> <div style="height:35px; overflow:hi ...
- JS实现页面回到顶部效果
[代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- 老猿学5G：融合计费的Nchf和Nchf‘服务化接口消息Nchf_ConvergedCharging_Create、Update、Release和Notify
☞ ░ 老猿Python博文目录░ 一.引言 在<老猿学5G扫盲贴:中国移动的5G计费架构解读>介绍了5G融合计费的服务化接口包括: CHF提供给CTF使用的Nchf接口 OCF提供给CH ...
- PyQt（Python+Qt）学习随笔：在一个窗口点击按钮弹出另一个窗口的实现方法及注意事项
在Qt Designer中定义了两个窗口,一个主窗口一个弹出窗口,需要实现在主窗口点击一个按钮时弹出弹出窗口. 经老猿验证: 1.弹窗的窗口类型无特殊要求,只要是QWidget等窗口部件就可以,也可以 ...
- 理解java底层通讯协议
引言: 本周自己重新对底层通讯方式进行了学习,在此做一个输出. 分别从客户端发送多个请求的需求角度与服务端接收多个连接发送请求的需求角度,剖析4种基于java自身技术实现的消息方式通讯所带来的影响,解 ...
- App界面
首先我直接放图,存储记录一下,自己开发的app,后端是java分布式,
- POJ2466 棋盘覆盖
一张\(n*m\)的棋盘,有\(k\)个点不能被覆盖,问其余点能不能被\(1*2\)的小矩形完全覆盖,多测 这题先输入\(m\)是什么鬼啊!!! 其实是一个比较裸的二分图判定,把\(k\)个点挖去然后 ...
- NOI Online #2 提高组 游记
没 NOI Online 1 挂的惨就来写游记吧,不知道为啥 NOI Online 1 民间数据测得 60 分的 T1 最后爆零了... 昏昏沉沉的醒来,吃了早饭,等到 \(8:30\) 进入比赛网页 ...
- 【SPOJ QTREE4】Query on a tree IV（树链剖分）
Description 给出一棵边带权(\(c\))的节点数量为 \(n\) 的树,初始树上所有节点都是白色.有两种操作: C x,改变节点 \(x\) 的颜色,即白变黑,黑变白. A,询问树中最远的 ...
- Java集合源码分析（六）——ConcurrentHashMap
目录 简介 源码分析 父类 接口 字段 内部类 1.链表节点结构 2.树根结构 3.树节点结构 方法 1.构造方法 2.基本并发方法 3.初始化表数组的操作 4.修改添加元素 5.统计元素数量 6.扩 ...
- MySQL技术内幕InnoDB存储引擎（二）——InnoDB存储引擎
1.概述 是一个高性能.高可用.高扩展的存储引擎. 2.InnoDB体系架构 InnoDB存储引擎主要由内存池和后台线程构成. 其中,内存池由许多个内存块组成,作用如下: 维护所有进程和线程需要访问的 ...
- springcloud gateway解决跨域问题
/** * 跨域允许 */ @Configuration public class CorsConfig { @Bean public WebFilter corsFilter() { return ...