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- ...
随机推荐
- moviepy执行TextClip.search方法时报错TypeError: a bytes-like object is required, not str
☞ ░ 前往老猿Python博文目录 ░ 执行TextClip.search方法时,报错: >>> from moviepy.editor import * >>> ...
- 第二十四章、containers容器类部件QScrollArea滚动区域详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 容器部件就是可以在部件内放置其他部件的部件,在Qt Designer中可以使用的容器部件有 ...
- PyQt(Python+Qt)学习随笔：QAbstractItemView的SelectionBehavior属性
老猿Python博文目录 老猿Python博客地址 一.概述 SelectionBehavior属性用于控制选择行为操作的数据单位,是指选择时选中数据是按行.按列还是按项来选择.SelectionBe ...
- Fiddle重定向请求
以当当网和淘宝网为例: 1.打开浏览器,在地址栏中输入www.dangdang.com,进入当当主页. 2.在规则编辑器中设置规则,将dangdang重定向至taobao,并打开规则. 3.再次刷新当 ...
- [BJDCTF 2nd]xss之光
[BJDCTF 2nd]xss之光 进入网址之后发现存在.git泄露,将源码下载下来,只有index.php文件 <?php $a = $_GET['yds_is_so_beautiful']; ...
- window下kettle安装
参考这篇文章 http://note.youdao.com/noteshare?id=a8c536ba952a48d60d7ea8f2cc61a94b
- 串口数据监视-Bus Hound
Bus Hound使用说明 一.打开该工具,会看到最上面的六个图标:1.Capture(捕捉按钮):按下它选择捕捉数据界面2.Save(保存按钮):按下它选择保存数据界面3.Setting(设置按钮) ...
- Python搭建调用本地dll的Windows服务(浏览器可以访问，附测试dll64位和32位文件)
一.前言说明 博客声明:此文链接地址https://www.cnblogs.com/Vrapile/p/14113683.html,请尊重原创,未经允许禁止转载!!! 1. 功能简述 (1)本文提供生 ...
- windows 远程连接报错
在windows7上或者windows10上远程连接服务器报错("连接错误"),试了网上的方法,发现是服务器安装ssl证书关闭了ssh服务,开启ssh服务后,重启电脑就可以解决这个 ...
- 学好Spark/Kafka必须要掌握的Scala技术点（一）变量、表达式、循环、Option、方法和函数，数组、映射、元组、集合
前言 Scala是以JVM为运行环境的面向对象的函数式编程语言,它可以直接访问Java类库并且与Java框架进行交互操作.正如之前所介绍,Spark是用Scala语言编写的,Kafka server端 ...