课堂笔记-----页面的自动滚动效果

页面的自动滚动效果,可由javascript来实现,

但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制。

使用marquee标记不仅可以移动文字,也可以移动图片,表格等.

语法:<marquee >...</marquee>; 说明:在标记之间添加要进行滚动的内容。

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

  语法:<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

  语法:<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

  语法:<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

  语法:<marquee scrolldelay="100">...</marquee>

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

  语法:<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

代码示例:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8 <div>
 9 <marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
10
11 //指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...
12
13 </marquee>
14 </div>
15 </body>
16 </html>
时间: 2024-08-02 17:43:06

课堂笔记-----页面的自动滚动效果的相关文章

页面的自动滚动效果

页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee

marquee标签实现页面内容的滚动效果

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

Android ViewPager 实现自动滚动效果

Android 中使用ViewPager 并实现自动滚动效果. 学习自:自己研究 OverView 我们在很多软件中都见过一下的效果,他的效果就是在在 APP的顶部会个自动滚动的View在滑动,那么我们看一下如何使用他吧. ViewPager的自动滚动效果 在 2019-12-27 日 我发过一篇 Android 中如何使用ViewPager的文章,如果你还不会ViewPager的基础使用,那么我觉得你可以去看一下.链接. 好了不多废话,我们看一下如何去实现ViewPager的自动滚动的效果.

实现当UILable的内容超出其范围后自动滚动效果

本文主要介绍 [当UILabel的内容超出其自身的宽度范围后,进行互动展示的效果],我们先来看一下Demo的效果图. 实际实现起来并不十分繁杂,在这里,为了开发的效率,我们使用了一个已经封装好的UILabel控制类CBAutoScrollLabel:点击“阅读原文”下载. 在写代码之前,我们还有一个准备工作,在stroyBoard中,找到需要实现效果的viewController,并向需要展示滚动效果label的地方拖一个UIView空间,并将其大小确定好(范围和之前需要展示滚动效果的label

20150620文本自动滚动效果

html====== <div class="demo1"> <h3>文本框中的文字自动滚动</h3> <div id="roll" data-rwidth="100" data-rheight="100" class="roll"> <ul id="ul" class="list" style="&qu

IOS开发学习笔记034-UIScrollView-循环自动滚动

实现scrollView的自动循环滚动,需要实现几个方法. 其中scrollView中始终保存三张图片,其他的图片在滚动到时再进行加载. 循环的实现主要是在setUpdate 中,如果索引为0是第一个,索引为2是最后一个,这是对索引值进行改变.第一个后接着显示最后一个,最后一个后接着显示第一个.依次循环. 分析过程为: 1.首先是set方法 setImageNames 1 #pragma mark - setter方法重写 2 - (void)setImageNames:(NSArray *)i

每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位置如下: 2. 还可以在实例router对象的时候设置 export default new Router({ mode: 'hash', // base: '/dist/', scrollBehavior: () => ({ y: 0

单页面全屏滚动效果使用element 跑马灯组件实例

别的不多说了  直接上代码吧 <template> <div class="full-group" ref="fullGroup"> <el-carousel direction="vertical" :autoplay="false" :loop="false" ref="carouselFull" @change="rollNumFn"

字符滚动效果0515复习笔记+注释

课件内容(有注释): 页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up上. down下. left左和 right有) 语法:<