说明:设置时间定时,在规定的时间内替换前一个节点的内容

1、关键代码:javascript:

复制代码代码如下:

var dome=document.getElementById("dome"); //获取节点

var dome1=document.getElementById("dome1");

var dome2=document.getElementById("dome2");

var speed=50;//设置向上轮动的速度

dome2.innerHTML=dome1.innerHTML;//复制节点 关键语句

function moveTop(){

if(dome1.offsetHeight-dome.scrollTop<=0){//判断内容第一次是否循环完了

dome.scrollTop=0;

}else{

dome.scrollTop++;//否则上移

}

}

var myFunction=setInterval("moveTop()",speed);//设置时间定时

dome.οnmοuseοver=function(){//鼠标放在区域内停止

clearInterval(myFunction);

}

dome.οnmοuseοut=function(){

myFunction=setInterval(moveTop,speed);

}

2、代码示例:完整代码(可运行)

复制代码代码如下:

循环滚动信息栏

body{

margin:0px;

padding:0px;

}

#express li{

height:25px;

border-bottom:dashed 1px #999;

line-height:20px;

font-size:12px;

list-style:none;

}

#dome{

height:305px;

overflow:hidden;

margin-top:0px;

}

#book_class{

width:200px;

height:310px;

border:3px solid #999;

margin-left:auto;

margin-right:auto;

margin-top:70px;

border-radius:5px 5px 5px 5px;

box-shadow:0px 0px 10px 10px #CECED1;

}

#express{

margin-left:-30px;

margin-right:10px;

margin-bottom:0px;

margin-top:0px;

}

#book_class div div ul li a{

text-decoration:none;

color:#333333;

}

#book_class div div ul li a:hover{

text-decoration:underline;

}

  • ·2010考研英语大纲到货75折...
  • ·权威定本四大名著(人民文...
  • ·口述历史权威唐德刚先生国...
  • ·袁伟民与体坛风云:实话实...
  • ·我们台湾这些年:轰动两岸...
  • ·畅销教辅推荐:精品套书50...
  • ·2010版法律硕士联考大纲75...
  • ·计算机新书畅销书75折抢购
  • ·2009年孩子最喜欢的书
  • ·弗洛伊德作品精选集59折

var dome=document.getElementById("dome");

var dome1=document.getElementById("dome1");

var dome2=document.getElementById("dome2");

var speed=50;//设置向上轮动的速度

dome2.innerHTML=dome1.innerHTML;//复制节点

function moveTop(){

if(dome1.offsetHeight-dome.scrollTop<=0){

dome.scrollTop=0;

}else{

dome.scrollTop++;

}

}

var myFunction=setInterval("moveTop()",speed);

dome.οnmοuseοver=function(){

clearInterval(myFunction);

}

dome.οnmοuseοut=function(){

myFunction=setInterval(moveTop,speed);

}

3、所的界面如下:

html自动滚动代码,html+css+javascript实现列表循环滚动示例代码相关推荐

  1. 仿电台网站网页版html代码,DIV+CSS实现电台列表设计的示例代码

    CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮.标签以及logo等等.很多网站中都应用了该技术,可有效减少传输请求次数,所需要的图标汇 ...

  2. c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码

    前言 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 效果图 示例代码: 扇形绘制 } .sx1{ position: absolut ...

  3. 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )

    坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...

  4. HTML5期末大作业:音乐网站设计——html5在线音乐新闻发布会网站模板(滚动页) HTML+CSS+JavaScript

    HTML5期末大作业:音乐网站设计--html5在线音乐新闻发布会网站模板(滚动页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计 ...

  5. HTML5期末大作业:商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...

    HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你 ...

  6. HTML5期末大作业:网购网站设计——品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码 学生简单购物网站设计成品

    HTML5期末大作业:网购网站设计--品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码 学生简单购物网站设计成品 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...

  7. (三款)Html5+Css+JavaScript实现2023年跨年代码烟花设计

    简介 一共是三款烟花设计 Html5+Css+JavaScript实现2023年跨年代码烟花设计 主题 第一款 (有雪花设计没有音乐) index.html <!DOCTYPE html> ...

  8. 搜索导航HTML,CSS 带搜索导航栏的示例代码

    本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...

  9. 下雪html特效代码,JavaScript 实现下雪特效的示例代码

    直接上代码 下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...

最新文章

  1. 设置显示VSCode的修改历史Local History,方便多人开发的时候快速查看谁修改了代码(也可以防止误删代码文件)
  2. java bytebuffer 大小,bytebuffer 获取长度
  3. eShopOnContainers 知多少[9]:Ocelot gateways
  4. sql server链接查询
  5. indesign中调出字符样式快捷键_Word中十大黄金快捷键,你会用几个?
  6. ES查询-基本查询续
  7. mysql 导入dmp_mysql导入导出sql文件
  8. ALAsset 循环获取图片(Assets Library Framework)
  9. 续《用最简单的例子实现jQuery图片即时上传》之多图上传实现
  10. 京东面试题(Redis):为啥RedisCluster设计成16384个槽
  11. 【渝粤题库】 陕西师范大学 210021 学前儿童健康教育 作业(专升本)
  12. --------溢出植入型木马(后门)的原型实现 作者:FLASHSKY(原创)
  13. IntelliJ IDEA主题选择
  14. 【Python】pandas计算DataFrame各列相关系数以及显著性检验
  15. 进销存系统功能结构图
  16. c# midi播放器_C#中的MIDI文件切片器和MIDI库
  17. 我的世界服务器指令修复耐久,我的世界修改装备耐久度指令 | 手游网游页游攻略大全...
  18. pmon下nandflash相关操作
  19. android8、android13自适应图标适配
  20. Python几种主流框架,知道三种你就是大神,干货建议收藏

热门文章

  1. python字符串操作、实验报告册——— 切片
  2. gradle构建编码_您可以通过构建以下一些应用想法来提高自己的编码技能
  3. CSS兼容写法中zoom:1的作用
  4. 在日本之后,中国也发布新型光刻机,ASML加快对中国出口光刻机
  5. 计算机领域相关属术语,基于语义规则和关联规则的特定领域中文术语字典的构造...
  6. 联通校园先锋队素拓方案
  7. mongodb 备份压缩_MongoDB实现备份压缩的方法教程
  8. 路透社:LG电子推出双屏5G智能手机 将在今年上半年上市
  9. win10电脑如何修改ip地址
  10. 【SDU青山】项目实训记录(1)