<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Document</title>
　　<style type="text/css">
　　　　p{
　　　　　　border: 0;
　　　　　　padding: 0;
　　　　　　margin: 0;
　　　　}
　　</style>
</head>
<body>
　　<div style="position: relative;width: 210px; height: 210px; margin:auto; overflow: hidden; border: 1px solid #ccc">
　　　　<div id="notice" style="position: absolute;">
　　　　　　<p>通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知</p>
　　　　　　<p>通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知</p>
　　　　　　<p>结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束</p>
　　　　</div>
　　</div>

　　<script>
　　　　var wrapdiv = document.getElementById("notice");
　　　　console.log(wrapdiv.offsetHeight)
　　　　wrapdiv.innerHTML = wrapdiv.innerHTML + wrapdiv.innerHTML;
　　　　console.log(wrapdiv.offsetHeight)
　　　　function scrollNotice() {
　　　　　　if (wrapdiv.offsetTop <= -wrapdiv.offsetHeight / 2) {
　　　　　　　　console.log(wrapdiv.offsetTop)
　　　　　　　　wrapdiv.style.top = '-1px';
　　　　　　　　return;
　　　　　　}
　　　　　　wrapdiv.style.top = wrapdiv.offsetTop-1+ 'px';
　　　　　　}

　　　　　　setInterval(scrollNotice, 50);
　　</script>
</body>
</html>

在这段程序中间用到了offsetTop和offsetHeight这两个属性，与之相关也容易混淆的还有scrollTop和scrollHeight,下边我对这四个属性进行详细的解释：（摘自http://www.cnblogs.com/devcjq/articles/3774071.html）

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

scrollTop 是“卷”起来的高度值，示例：
<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。

scrollHeight 与 offsetHeight

offsetHeight是自身元素的高度，scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值？？？)。

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">

<p style="background-color:red; height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
</p>
</div>
<script>
alert(document.getElementById("container").offsetHeight);
alert(document.getElementById("container").scrollHeight);
</script>
将依次输出100，250。因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为 250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以scrollHeight值为 100+150=250。

JS实现无缝滚动的更多相关文章

  1. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  2. scrollLeft的相关问题（js横向无缝滚动）

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

  3. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  4. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  5. JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  6. js 图片无缝滚动

    html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...

  7. js文字无缝滚动

    <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1&g ...

  8. CSS3动画之无缝滚动

    与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...

  9. js 图片无缝循环

    <html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> ...

随机推荐

  1. java_SE(Day15)_集合1

    一.集合类概述: 1.为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,Java就提供了集合类. 2.数组和集合类同是容器,有何不同? 数组虽然也可以存储对象 ...

  2. Python 之简易单链表

    单链表的基本要素有 2 个,数据项和连接项.这两项在 Python 中可以通过对象及其属性来实现. class Node: def __init__ (self, data): self.data = ...

  3. select for update行锁

     select for update行锁 2008-05-26 15:15:37 分类: Oracle Select-For Update语句的语法与select语句相同,只是在select语句的后面 ...

  4. python3.5学习笔记：linux6.4 安装python3 pip setuptools

    前言: python3应该是python的趋势所在,当然目前争议也比较大,这篇随笔的主要目的是记录在linux6.4下搭建python3环境的过程 以及碰到的问题和解决过程. 另外,如果本机安装了py ...

  5. C++程序设计（关于函数中数组传递的一点心得）

    题目: 10个学生考完期末考试评卷完成后,老师需要划出及格线,要求如下: (1) 及格线是10的倍数: (2) 保证至少有60%的学生及格: (3) 如果所有的学生都高于60分,则及格线为60分:   ...

  6. ios获取UserAgent

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero]; NSString *userAgent = [webView st ...

  7. 学习SQL的点点滴滴（五）-DELETE小计

    惨痛的教训: 某次在执行delete时,一时疏忽忘记写where条件了, 1.删除tb_mobile_cust_micromsg中的内容,前提是c_customer这个字段的值与#datamod表中c ...

  8. 【MySQL】悲观锁&乐观锁

    悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念.本文将对这两种常见的锁机制在数据库数据上的实现进行比较系统的介绍. 悲观锁(Pessimistic Lock) 悲观锁的 ...

  9. 擦掉STM32F429芯片上的数据的一个方法

    刚入手一块STM32F429Discovery.手痒痒的,准备写个程序进去.一不小心,把MCU的调试接口SW.JTAG全部给禁用了.这下可坏了,写不进去程序,擦不掉数据.愁的某家一头大汗.突然想起了当 ...

  10. C++坑点集合 - 1 隐式调用和默认实现的构造函数的坑

    C++是一个编译器会替你在背后做很多事情的语言,包括模板实例化,按需要创造隐式的构造函数,默认构造你没有显式构造的成员,按需进行隐式转换和饮食构造等等,如果没有彻底了解清楚,就容易被这些编译器背后做好 ...