html自动滚动代码,html+css+javascript实现列表循环滚动示例代码
说明:设置时间定时,在规定的时间内替换前一个节点的内容
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实现列表循环滚动示例代码相关推荐
- 仿电台网站网页版html代码,DIV+CSS实现电台列表设计的示例代码
CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮.标签以及logo等等.很多网站中都应用了该技术,可有效减少传输请求次数,所需要的图标汇 ...
- c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 效果图 示例代码: 扇形绘制 } .sx1{ position: absolut ...
- 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
- HTML5期末大作业:音乐网站设计——html5在线音乐新闻发布会网站模板(滚动页) HTML+CSS+JavaScript
HTML5期末大作业:音乐网站设计--html5在线音乐新闻发布会网站模板(滚动页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计 ...
- HTML5期末大作业:商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...
HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业:网购网站设计——品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码 学生简单购物网站设计成品
HTML5期末大作业:网购网站设计--品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码 学生简单购物网站设计成品 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- (三款)Html5+Css+JavaScript实现2023年跨年代码烟花设计
简介 一共是三款烟花设计 Html5+Css+JavaScript实现2023年跨年代码烟花设计 主题 第一款 (有雪花设计没有音乐) index.html <!DOCTYPE html> ...
- 搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
- 下雪html特效代码,JavaScript 实现下雪特效的示例代码
直接上代码 下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...
最新文章
- 设置显示VSCode的修改历史Local History,方便多人开发的时候快速查看谁修改了代码(也可以防止误删代码文件)
- java bytebuffer 大小,bytebuffer 获取长度
- eShopOnContainers 知多少[9]:Ocelot gateways
- sql server链接查询
- indesign中调出字符样式快捷键_Word中十大黄金快捷键,你会用几个?
- ES查询-基本查询续
- mysql 导入dmp_mysql导入导出sql文件
- ALAsset 循环获取图片(Assets Library Framework)
- 续《用最简单的例子实现jQuery图片即时上传》之多图上传实现
- 京东面试题(Redis):为啥RedisCluster设计成16384个槽
- 【渝粤题库】 陕西师范大学 210021 学前儿童健康教育 作业(专升本)
- --------溢出植入型木马(后门)的原型实现 作者:FLASHSKY(原创)
- IntelliJ IDEA主题选择
- 【Python】pandas计算DataFrame各列相关系数以及显著性检验
- 进销存系统功能结构图
- c# midi播放器_C#中的MIDI文件切片器和MIDI库
- 我的世界服务器指令修复耐久,我的世界修改装备耐久度指令 | 手游网游页游攻略大全...
- pmon下nandflash相关操作
- android8、android13自适应图标适配
- Python几种主流框架,知道三种你就是大神,干货建议收藏
热门文章
- python字符串操作、实验报告册——— 切片
- gradle构建编码_您可以通过构建以下一些应用想法来提高自己的编码技能
- CSS兼容写法中zoom:1的作用
- 在日本之后,中国也发布新型光刻机,ASML加快对中国出口光刻机
- 计算机领域相关属术语,基于语义规则和关联规则的特定领域中文术语字典的构造...
- 联通校园先锋队素拓方案
- mongodb 备份压缩_MongoDB实现备份压缩的方法教程
- 路透社:LG电子推出双屏5G智能手机 将在今年上半年上市
- win10电脑如何修改ip地址
- 【SDU青山】项目实训记录(1)