html滚动效果代码,javascript 实现滚动效果代码整理

1.先写两个最常用最简洁的滚动代码

代码如下:

水平滚动:

水平滚动字幕内容

垂直滚动:

垂直滚动字内容

2.平稳不间断滚动

var tm=null

function newsScroll() {

var scrollimg=document.getElementById("scroll")

if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2))

scrollimg.parentNode.scrollTop++;

else

scrollimg.parentNode.scrollTop=0

}

window.οnlοad=function() {

tm=setInterval('newsScroll()',25)

}

function stop()

{

clearInterval(tm)

}

function start()

{

tm=setInterval('newsScroll()',25)

}

/* stop() start() 不能和调用ID在同一个容器内, 如容器没默认高度 要制定高度*/

3 有停留滚动代码示例:

无标题文档

多行滚动演示:

这是公告标题的第一行

这是公告标题的第二行

这是公告标题的第三行

这是公告标题的第四行

这是公告标题的第五行

这是公告标题的第六行

这是公告标题的第七行

这是公告标题的第八行

向前  向后

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

4:一个简单的滚动代码学习制作示例

无间断循环滚动效果

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

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

Js代码说明:

JavaScript代码:

var s,sn=0,timer,slen,timer2;

//初始化设置

function scrollInit(){

s=getid("s1"); //获取需要滚动内容的对象

s.scrollTop=0; //初始化滚动位置

slen=s.innerHTML.split("|"); //获取滚动内容,并存入数组,以便显示调用

s.innerHTML=""; //清空滚动对象内容

for(var i=0;i");} //格式化输出滚动内容

s.innerHTML+=slen[0];

timer2=setInterval(scrollstart,3000); //开始滚动

s.οnmοuseοver=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠标经过,停止滚动,改变样式

s.οnmοuseοut=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠标移开,恢复滚动

}

//开启滚动效果

function scrollstart(){

if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滚动内容到底时,重置内容位置

timer=setInterval(scrollexec,30); //执行滚动动画效果

}

//滚动动画效果

function scrollexec(){

if(sn<20){

sn++;

s.scrollTop++;

}else{

sn=0;

clearInterval(timer);

}

}

//通过ID获取对象

function getid(id){return document.getElementById(id);}

//网页加载后,执行初始化

window.οnlοad=scrollInit;

原理解析:

1、首先给容器设定高度或宽度,比如div,设置div高20px;overflow:hidden;

2、容器高度设定后,内容的高度超出20px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果;

3、改变容器的scrollTop(上下滚动)或scrollLeft(左右滚动)属性的值,让内容移动位置(滚动的原理);

4、到滚动的高度scrollTop大于或等于内容的高度时,设置scrollTop=0,让内容返回原来的位置,重新开始滚动,无间断循环滚动效果就出现了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

itools 不支持缩略图下载_PS插件缩略图3.8.0.96安装教程

插件下载[名称]&#xff1a;PS插件『缩略图补丁3.8.0.96』[大小]&#xff1a;1.4 MB [语言]&#xff1a;简体中文 [安装环境]&#xff1a;Win7/Win8/Win10[支持版本]&#xff1a;PS CS6—CC2019[32/64位下载链接]&#xff1a;https://pan.baidu.com/s/1AlOlWzMZfYgdJSlZpbQsmw…

z370支持pcie信号拆分吗_定了!AMD B550主板确认将支持PCIE4.0,多项能力接近X570

近日&#xff0c;华擎B550AM Gaming主板照片和文档泄露&#xff0c;Micro-ATX板型、具备4内存插槽&#xff0c;支持PCIE4.0显卡/固态硬盘。B550芯片组本身无法拆分PCIE4.0信道&#xff0c;所以华擎的这张B550主板在搭配第三代锐龙时只有第一条PCIE插槽(通常安装独立显卡)和M.2固…

mac 修改conda镜像 condarc_win10 修改anaconda源

通过 conda config 命令生成配置文件&#xff0c;这里&#xff0c;我们使用清华的镜像&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/&#xff0c;首先&#xff0c;打开CMD&#xff0c;执行命令&#xff1a;conda config --add channels https://mirro…

倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器

倒计时功能&#xff0c;在很多地方都会用到&#xff0c;我们平时都习惯去用一些插件来应用&#xff0c;会减少不少的工作量&#xff0c;并且效果也能达到预期。我今天并不是想分享什么倒计时插件&#xff0c;而是自己写一个简单的倒数计时器&#xff0c;有兴趣的同学可以往下看…

空间说说html,空间说说大全(共100句)

1、把眼泪留给最疼你的人&#xff0c;把微笑留给伤你最深的人。2、只要再坚持一下下&#xff0c;我们就能到幸福的彼岸。3、伤害过我的人&#xff0c;我从不让他们好过。4、其实生活很平淡&#xff0c;只是我们自己把它弄得苦不堪言。5、忘记&#xff0c;那么冰凉&#xff0c;绝…

七牛云 转码_七牛云存储 - 七牛 php sdk 上传 转码 问题

实在是不会用 sdk 呀 都蒙圈了求大神 指点vendor(Qiniu.io);vendor(Qiniu.rs);$bucket icunzai-voice;$key $filename;$client new \Qiniu_MacHttpClient(null);$putPolicy new \Qiniu_RS_PutPolicy("$bucket:$key");$putPolicy->CallbackUrl U(/Wechat/Bott…

手机端使用ghelper_Anki手机端使用指南(一)

【本篇会对如何使用手机端anki进行详解】有小伙伴询问在应用商店搜索anki找不到名字叫“anki”的软件&#xff0c;这里解释一下&#xff0c;在手机端的名字和电脑端的名字不太一样。安卓对应的名字叫做AnkiDroidIOS对应的名字叫做Ankimobile不过其实是一个软件&#xff0c;同步…

计算机专业英语词汇mp3,【听单词】计算机专业英语词汇音频106,计算机英语单词MP3...

monitor call instruction n.监督命令描述operator unit console 操作负单元控制台emergency switch 应急开关discontinuous spectrum 不连续频谱critical path scheduling method n.关键路径调度法track centertocenter spacing n.磁道中心矩(磁道中心距)digital computing n.…

python生物数据分析_Python学生物统计-数据可视化-学习笔记5

5.1 作图的重要性在分析一个数据之前, 我们首先要对数据进行检查, 在统计上看一下汇总统计, 比如最大值, 最小值, 中位数, 平均值, 方差, 标准差, 变异系数等等.直方图, 看一下数据的分布情况箱线图, 看一下数据的分布, 有无异常值所谓一图胜千言.python中的作图工具5.2 散点图…

三甲医院his系统源码_三甲医院科研管理系统是什么,科研成果包括哪些

对于三甲医院来说&#xff0c;做科研管理系统必不可少的是数据收集&#xff0c;有一个方便的数据收集管理软件能记科研效率提高很多&#xff0c;那就是三甲医院科研管理系统&#xff0c;首先&#xff0c;我们先了解一下三甲医院科研管理系统是什么&#xff0c;科研成果包括哪些…

html的表格使用函数,从另一个HTML表格创建HTML表格的jQuery函数

我在页面上有一个HTML表格&#xff0c;我想用jQuery从中获取信息&#xff0c;清理/清理它&#xff0c;并创建一个新的“干净的”HTML表格信息。从另一个HTML表格创建HTML表格的jQuery函数我有表具有以下结构&#xff1a;Full Name123.456.7890456.789.0123OfficeTitleSuperviso…

小说中场景的功能_场景在小说中的作用

文 | 彼岸晓吾/ Part 01写场景最厉害的作家有余华&#xff0c;莫言和村上。初学写作者最容易犯的毛病是不会写场景&#xff0c;不了解场景的意义所在。很多写手以为&#xff0c;只要把自己的意思表达出来&#xff0c;自然会形成一篇文章或一个故事。其实不然。那么&#xff0c;…

python 批量读取xlsx并合并_如何用Python快速导入多个excel文件并合并文件数据

日常工作中&#xff0c;每个月都会遇到那么个固定的工作&#xff0c;将业务方同事整理的数据导入GP数据库中的某张表中&#xff1b;听起来是很简单的活呢&#xff01; 但每次业务MM总会发来一个文件夹&#xff0c;里面有三四十个Excel文件&#xff08;.xlsx格式&#xff0c;且字…

ie8 html 编辑器 为word,ie8生成word

1. 兼容IE8 导出Wrod方法直接var wordnew ActiveXObject("word.Application");word.visibletrue&#xff1b;(这句不要就不显示word出来&#xff0c;后台处理)var docword.ActiveDcouemnt;doc.content.text"导出内容"doc.save(如果要选择存放路径)就用doc.…

git 创建邮箱 用户名_厉害了!IDEA中如何使用Git进行项目管理,完整教程来了?...

第一部分:安装1. 下载地址: https://git-scm.com/download/win如果速度慢, 使用 迅雷下载;2. 点击安装, 然后下一步, 直到下面这个页面:建议: 按照上面所示方式选中复选框 ;3. 点击下一步, 直到出现这个页面:建议: 这个页面是选择git使用的命令行, 建议使用第一个git自带的;4. …

程序员操作系统推荐_为什么程序员要会 Linux

(给伯乐在线加星标&#xff0c;看经典文章)作者&#xff1a;猫嗅花https://www.jianshu.com/p/5020fbd76d0c三大操作系统概述三大操作系统概述windows, macOS, linux是当今主流三大操作系统&#xff0c;普通用户一般是选择windows或macOS, linux主要是占据服务器领域市场。这三…

url中能出现的字符_网站URL配置4个技巧,轻松获得更多流量

对于刚入行的SEO新人&#xff0c;我们在做企业网站优化的时候&#xff0c;通常都是按照程序员设置的网站架构进行线上基础性内容的优化&#xff0c;特别是在使用一些固定CMS系统的时候&#xff0c;大量的站内URL都是配置固定的&#xff0c;很少有人去关注这方面对SEO的影响。那…

关于计算机网络的短文英语,英语翻译哪个心心好嘛!帮我用英语写一段关于计算机网络的100多个字的短文嘛!内容随便写!只要是关于计算机网络的!...

计算机网络,可以参考内容&#xff1a;)~~Computer Network is A software/hardware infrastructure Share resources data, files, computing power Information highway communication between geographically dispersed users Electronic Society Cyberspace Virtual global …

python 调用mysql_Python调用Mysql

最近在学习Python&#xff0c;发现Python的众多类库给Python开发带来了极大的便利性。 由于项目中使用Mysql&#xff0c;就考虑尝试使用Python调用Mysql&#xff0c;方便写一些调试用的小程序代码。花了半天差了些资料&#xff0c;自己动手&#xff0c;做了个简单的demo&#x…

arm export 汇编_C/C++与汇编混合编程有什么好处?

1.导语当需要C/C与汇编混合编程时&#xff0c;可以有以下两种处理策略&#xff1a;若汇编代码较短&#xff0c;则可在C/C源文件中直接内嵌汇编语言实现混合编程。若汇编代码较长&#xff0c;可以单独写成汇编文件&#xff0c;最后以汇编文件的形式加入项目中&#xff0c;通过AT…