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- ...
随机推荐
- Unity使用transform.Rotate进行三维旋转角度出现偏差
Unity使用transform.Rotate进行三维旋转角度出现偏差 情形 最开始遇到该问题的情况比较复杂,另写了一个例子.情形如下: 一个立方体上挂载脚本: transform.Rotate(25 ...
- 后端程序员必备的 Linux 基础知识
1. 从认识操作系统开始 正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介 我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...
- Sql注入--数字型手工测试
Sql注入--数字型手工测试 漏洞原因:是在数据交互中,前端的数据传入到后台处理时,没有做严格的判断,导致其传入的"数据"拼接到SQL语句中后,被当作SQL语句的一部分执行. 从而 ...
- HTTP接口传输数据常用的方式
Get方式是从服务器上获取数据,在数据查询时,建议用Get方式:如商品信息接口.搜索接口等 Post方式是向服务器传送数据,做数据添加.修改或删除时,建议用Post方式,如登录注册接口等. 1.GET ...
- Java程序员需要了解的底层知识(一)
硬件基础知识 - Java相关硬件 汇编语言的执行过程(时钟发生器 寄存器 程序计数器) 计算机启动过程 进程线程纤程的基本概念面试高频 - 纤程的实现 内存管理 进程管理与线程管理(进程与线程 ...
- C#使用ML.Net完成人工智能预测
前言 Visual Studio2019 Preview中提供了图形界面的ML.Net,所以,只要我们安装Visual Studio2019 Preview就能简单的使用ML.Net了,因为我的电脑已 ...
- JQuery获取父，子，兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- Codeforces Round #631 (Div. 1) A-C
在 \(\text{Div. 2/3}\) 混了一个多月后,四个号终于都上紫了,也没用理由不打 \(\text{Div. 1}\) 了.这是我人生中的第一场 \(\text{Div .1}\) ,之前 ...
- WebFlux中thymeleaf视图找不到的问题解决
由于在weblux临时增加一个H5的页面,发生如下错误 Whitelabel Error Page This application has no configured error view, so ...
- JWT-配置与使用
1.jwt的安装配置 . 1.1安装JWT pip install djangorestframework-jwt==1.11.0 1.2 settings.py配置jwt载荷中的有效期设置 # jw ...