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- ...
随机推荐
- 第15.24节 PyQt(Python+Qt)入门学习：Model/View架构中QTableView的作用及属性详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 在Designer的部件栏Item Views中提供了PyQt和Qt已经实现好的table ...
- SLR(1)语法分析(JAVA实现)
要求 代码 import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util. ...
- 扩展Linux网络栈
扩展Linux网络栈 来自Linux内核文档.之前看过这篇文章,一直好奇,问什么一条网络流会固定在一个CPU上进行处理,本文档可以解决这个疑问.为了更好地理解本文章中的功能,将这篇文章穿插入内. 简介 ...
- PHP代码审计分段讲解（1）
PHP源码来自:https://github.com/bowu678/php_bugs 快乐的暑期学习生活+1 01 extract变量覆盖 <?php $flag='xxx'; extract ...
- Hive基本原理及配置Mysql作为Hive的默认数据库
Hive是什么? Hive是基于Hadoop之上的数据仓库: Hive是一种可以存储.查询.分析存储在hadoop中的大规模数据 Hive定义了简单的类SQL查询语言,成为HQL,它允许熟悉SQL的用 ...
- 小心使用 Task.Run 解惑篇
继上一篇文章之后,这篇文章主要解答以下两个疑惑: 由于值类型是拷贝的方式赋值,所以捕获的本地变量和类成员是指向的是各自的值,对本地变量的捕获不会影响到整个类.但如果把 _id 改为引用类型(如 Str ...
- HTML引入外部字体
HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...
- Java集合源码分析（六）——ConcurrentHashMap
目录 简介 源码分析 父类 接口 字段 内部类 1.链表节点结构 2.树根结构 3.树节点结构 方法 1.构造方法 2.基本并发方法 3.初始化表数组的操作 4.修改添加元素 5.统计元素数量 6.扩 ...
- Java-web-多个独立项目之间相互调用实践
本篇文章只涉及到应用层面,没有涉及到什么底层原理之类的,我目前的实力还没有达到那个级别.如果是大神级别的人看到这篇文章,请跳过. 项目框架也已经是搭建好了的,springboot版本为1.5,数据库操 ...
- shell－－检查apache是否启动脚本
#首先我们需要检查apache是否以启动,这里我们用到的说nmap命令,Linux默认情况下是没有安装nmap命令的. #那么我们需要安装下nmap,安装的命令很简单:yum -y install n ...