使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可

Dom内容

  1. <div id="container">
  2. <ul id="con1">
  3. <li>javascript1</li>
  4. <li>javascript2</li>
  5. <li>javascript3</li>
  6. <li>javascript4</li>
  7. <li>javascript5</li>
  8. <li>javascript6</li>
  9. <li>javascript7</li>
  10. </ul>
  11. </div>

css内容

  1. #container{width:400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;}
  2. ul{list-style: none;padding:0;margin:0}
  3. ul li{height:24px;line-height: 24px;}

js相关内容

  1. <script type="text/javascript">
  2. var c=document.getElementById("container");
  3. var con1=document.getElementById("con1");
  4. con1.innerHTML+=con1.innerHTML; //把自身的内容变为原来的2倍
  5. // timer,t;
  6. var iHeight=24;
  7. var d=1000;
  8. var speed=50;
  9. function sTop(){
  10. if(c.scrollTop%iHeight==0){//如果卷去的距离能够除尽一行的高度
  11. clearInterval(timer);//把定时器清除
  12. t=setTimeout(startMove,d);//延迟1s后继续触发定时器
  13. }
  14. if(c.scrollTop>=con1.scrollHeight/2){ //如果卷去的高度>=整个ul高度的一半时
  15. c.scrollTop=0;
  16. c.scrollTop=c.scrollTop-con1.scrollHeight/2; //让ul回到原点 即c.scrollTop=0
  17. }else{
  18. c.scrollTop++; //如若不然,继续往上滚动
  19. }
  20. }
  21. function startMove(){
  22. c.scrollTop++;
  23. timer=setInterval(sTop,speed);
  24. }
  25. startMove();
  26. c.onmouseover=function(){
  27. clearInterval(timer);
  28. clearTimeout(t);
  29. }
  30. c.onmouseout=function(){
  31. timer=setInterval(sTop,speed);
  32. }
  33. </script>

js文字的无缝滚动(上下)的更多相关文章

  1. angular实现的文字上下无缝滚动

    最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...

  2. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  3. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

  4. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  7. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  8. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  9. js实现表格无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. node12---mongodb

    一.传统数据库技术回顾 数据库就是存储数据的,那么存储数据就用txt就行了啊,为什么要有数据库? 理由之1: 数据库有行.列的概念,数据有关系,数据不是散的. 老牌数据库,比如MySQL.SQL Se ...

  2. NOIP2017提高组模拟赛5 (总结)

    NOIP2017提高组模拟赛5 (总结) 第一题 最远 奶牛们想建立一个新的城市.它们想建立一条长度为N (1 <= N <= 1,000,000)的 主线大街,然后建立K条 (2 < ...

  3. .net中的目录

    System.Environment.CurrentDirectory Application.StartupPath https://msdn.microsoft.com/en-us/library ...

  4. python中各项目文件含义(新手可看)

    其他不用多说,这里主要阐述三个概念,包.模块.类 包我们可以看作一个包含__init__.py 和一系列.py 文件的文件夹,包含__init__.py这样做的目的是为了区别包和普通字符串,读者可以试 ...

  5. html 移动端关于长按图片弹出保存问题

    在做html5项目的时候有个需求是要拖动一个图片,但是又不要用户长时间按着弹出保存框.首先想到的就是在点图片的时候阻止默认事件的发生: js停止冒泡· function myfn(e){ window ...

  6. stm8s103 EEPROM烧程序时能否保留

    EEPROM的参数需要再烧录程序时保留,做试验测试是否能够保留 1.在ST Visual Develop中硬件仿真手动修改EEPROM的值. 2.在ST Visual Programmer中读取EEP ...

  7. Linxu基本指令

    一.Linux权限的概念 Linux下有两种用户:普通用户和超级用户(). 普通用户:在linux下做有限的事情: 超级用户:可以在linux系统下做任何事情,不受限制. 普通用户的提示符是“$”,超 ...

  8. BZOJ 5394 [Ynoi2016]炸脖龙 (线段树+拓展欧拉定理)

    题目大意:给你一个序列,需要支持区间修改,以及查询一段区间$a_{i}^{a_{i+1}^{a_{i+2}...}}mod\;p$的值,每次询问的$p$的值不同 对于区间修改,由线段树完成,没什么好说 ...

  9. 越努力越幸运--2-LD_PRELOAD, fork ,僵尸进程

    开始新的工作了,做了爸爸之后感觉一直都是浑浑噩噩,希望老婆和宝宝一直健康开心~ 最近遇到的问题很多啊,哈哈 1. 装环境时候,需要的glibc 版本不对,我把本地的软链接改了个别名(惯性思维),然后一 ...

  10. 洛谷 P1220 关路灯 (贪心+区间dp)

    这一道题我一直在想时间该怎么算. 看题解发现有个隐藏的贪心. 路径一定是左右扩展的,左右端点最多加+1(我竟然没发现!!) 这个性质非常重要!! 因此这道题用区间dp f[i][j]表示关完i到j的路 ...