文字滚动效果_javascript技巧_脚本之家,实现滚动

日期:2019-11-26编辑作者:澳门金莎娱乐手机版

1.先写两个最常用最简洁的滚动代码 代码如下: 水平滚动: 水平滚动字幕内容 垂直滚动: 垂直滚动字内容 2.平稳不间断滚动 复制代码 代码如下:

这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来。下面看看它的实现过程: 1.html 复制代码 代码如下:

/* stop 不能和调用ID在同一个容器内, 如容器没默认高度 要制定高度*/ 3 有停留滚动 代码示例:

  • 第一行
  • 第二行
  • 第三行

无标题文档

澳门金莎娱乐手机版,2.css 复制代码 代码如下: .box{ width:150px; height:25px; line-height:25px; border:#bbb 1px solid; overflow:hidden; } .box ul{margin:0; padding:0} .box li{ height:25px; line-height:25px; font-size:12px; text-align:center; list-style-type:none; } 3.js 复制代码 代码如下: function startmarquee{ /* 函数startmarquee的参数: lh:文字一次向上滚动的距离或高度; speed:滚动速度; delay:滚动停顿的时间间隔; index:可以使封装后的函数应用于页面当中不同的元素; */ var t; var p=false; var o=document.getElementById; //获取文档中的滚动区域对象,赋值给变量o; o.innerHTML+=o.innerHTML; //对象中的实际内容被复制了一份,包含了两个ul,当然li标签也 由原来的3行,变为6行;复制的目的在于给文字不间断向上滚动提供过渡。 o.onmouseover=function(){p=true} //鼠标滑过,停止滚动; o.onmouseout=function(){p=false} //鼠标离开,开始滚动;p是true还是false直接影响到下面start()函数的执行; o.scrollTop = 0; //文字内容顶端与滚动区域顶端的距离,初始值为0; function start(){ t=setInterval; //每隔一段时间,setInterval便会执行一次 scrolling函数;speed越大,滚动时间间隔越大,滚动速度越慢; if{ o.scrollTop += 1;} //滚动停止或开始,取决于p传来的布尔值; } function scrolling(){ if{ //如果不被整除,即一次上移的高度达不到lh,则内容会继续往上滚动; o.scrollTop += 1; if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; //对象o中的内容之前被复制了一次,所以它的滚动高度,其实是原来内容的两倍高度; 当内容向上滚动到scrollHeight/2的高度时,全部3行文字已经显示了一遍,至此整块内容 scrollTop归0;再等待下一轮的滚动,从而达到文字不间断向上滚动的效果; }else{ clearInterval; //否则清除t,暂停滚动 setTimeout; //经过delay间隔后,启动start() 再连续滚动 } } setTimeout; //第一次启动滚动;setTimeout会在一定的时间后执行函数start(),且只执行一次 } //传递参数 startmarquee; //带停顿效果 startmarquee; //不间断连续 以下为全部代码:

这是公告标题的第一行 这是公告标题的第二行 这是公告标题的第三行 这是公告标题的第四行 这是公告标题的第五行 这是公告标题的第六行 这是公告标题的第七行 这是公告标题的第八行 向前向后

文字向上滚动

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 4:一个简单的滚动代码学习制作示例

第一行 第二行 第三行 第一行 第二行 第三行

无间断循环滚动效果

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

北 京|上 海|广 州|西 安|南 京|大 连|哈尔滨|武 汉

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] Js代码说明: JavaScript代码: 复制代码 代码如下: var s,sn=0,timer,slen,timer2; //初始化设置 function scrollInit; //获取需要滚动内容的对象 s.scrollTop=0; //初始化滚动位置 slen=s.innerHTML.split; //获取滚动内容,并存入数组,以便显示调用 s.innerHTML=""; //清空滚动对象内容 for(var i=0;i={s.scrollTop=0;} //滚动内容到底时,重置内容位置 timer=setInterval; //执行滚动动画效果 } //滚动动画效果 function scrollexec{ sn++; s.scrollTop++; }else{ sn=0; clearInterval; } } //通过ID获取对象 function getid{return document.getElementById;} //网页加载后,执行初始化 window.onload=scrollInit; 原理解析: 1、首先给容器设定高度或宽度,比如div,设置div高20px;overflow:hidden; 2、容器高度设定后,内容的高度超出20px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果; 3、改变容器的scrollTop或scrollLeft属性的值,让内容移动位置; 4、到滚动的高度scrollTop大于或等于内容的高度时,设置scrollTop=0,让内容返回原来的位置,重新开始滚动,无间断循环滚动效果就出现了。

本文由澳门金莎娱乐网站发布于澳门金莎娱乐手机版,转载请注明出处:文字滚动效果_javascript技巧_脚本之家,实现滚动

关键词:

in锚点的动态创建,收集整理的四个方向的滚动

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 向左滚动 测试状态栏字符的滚动 JavaScript 无缝左右滚动加定高定宽停...

详细>>

面向对象,构造函数的出现

在全局执行环境中使用this,标识Global对象,在浏览器中就是window对象。当在函数执行环境中使用this时,如果函数没有...

详细>>

拖放效果代码_javascript技巧_脚本之家,区域外事

不过setCapture不支持键盘事件,只能捕获以下鼠标事件:onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onm...

详细>>

javascript执行效率澳门金莎娱乐手机版:,高效运

作者 Mark 'Tarquin' Wilton-Jones · 2006年11月2日 有效提高JavaScript执行效率的几点知识,javascript执行效率 为了提供新鲜、别...

详细>>