代码编织梦想

前端使用marquee标签实现提示语滚动效果

使用marquee标签实现提示语滚动效果

<marquee onmouseover="stop()" onmouseout="start()" bgcolor="yellow" direction="left" scrolldelay=5 scrollamount=6 onstart="alert('欢迎欢迎')" behavior="alternate" onbounce="alert('滚到尾了!')" loop="3" onfinish="alert('循环滚动结束啦!!!')" >
// 可在中间写所需的任意内容,例如p标签等等
欢迎欢迎
</marquee>

一些相关参数介绍:
1、bgcolor:滚动文本框的背景颜色(值是16进制的RGB颜色,默认:白色)。
2、direction:滚动方向的设置,可选择Left(从右到左:默认)、right(从左向右)、up(从下到上)和down(从上到下)。
3、behavior:滚动的方式设置,三种取值:scroll(循环滚动:默认)、slide(滑入,单次滚动)、alternate(两端来回滚动)。
4、scrolldelay:每轮滚动之间的延迟时间,数字越大滚动越慢(默认:0)。
5、scrollamount:一次滚动总的时间量,数字越小滚动越慢(默认:6,单位:毫秒)。
6、width:滚动文本框的宽度,(默认:width=100%)输入一个数值后再从后面的单选框选择in Pixels(按像素)或in Percent(按百分比)。
7、height:滚动文本框的高度, (默认:height为标签内元素的高度)输入一个数值后再从后面的单选框选择in Pixels(按像素)或in Percent(按百分比)。
8、loop:滚动次数(默认:infinite)。
9、hspace、vspace:前后、上下的空行(值是正整数,单位:像素)。
10、omouseover:鼠标移入停止滚动,一般配合stop()方法使用(οnmοuseοver=“stop”)。
11、omouseout:鼠标移开继续滚动,一般配合start()方法使用(οnmοuseοut=“start”)。
12、事件的回调:
(1)onbounce:当marquee标签滚动到结尾时触发(behavior="alternate"触发)。
(2)onfinish:当marquee标签完成了loop属性设置的值时触发(loop大于0时触发)。
(3)onstart:当 marquee标签开始滚动时触发。

  • onstart=“alert(‘欢迎欢迎’)” 效果:谷歌没有反应,这里用的是火狐测出来的弹窗在这里插入图片描述

  • behavior=“alternate” onbounce=“alert(‘滚到尾了!’)” 效果:火狐的效果
    在这里插入图片描述

  • loop=“3” onfinish=“alert(‘循环滚动结束啦!!!’)” 效果:火狐的效果,循环了3次后的弹窗
    在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_50298323/article/details/131081711

marquee跑马灯的替代方式_杀猪刀-墨林的博客-爱代码爱编程_marquee替代方式h5

随着H5的语义化,marquee标签逐渐被替代,后续可能浏览器不支持 这里介绍一下替代方式 实现位移的话,可以使用css3的transform配合过渡或者定时器 transition、transform、anmiation,使用css3的话,要考虑自己的应用场景,也就是滚动内容的宽度是固定的,因为@keyframe动画是在css中硬编码的,如果想用的

marquee标签详解-爱代码爱编程

marquee标签详解 由于在工作看到同事写的marquee的标签,但是不理解这个标签怎么使用,于是在网上查询了一些资料,终于把这个标签给看懂了,下面我就给大家分享一下我的理解。 <marquee>标签是成对出现,而我们滚动的内容就包裹在<marquee></marquee>内部。而marquee的主要属性和事件有以

html php滚动代码,HTML标签marquee实现滚动效果实例代码-爱代码爱编程

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

告知书页面html样式,纯CSS实现的三种通知栏滚动效果-爱代码爱编程

前言 通知栏组件是一个比较常见的组件了,基本上每个站点都会有怎么个组件,主要就是通告站点的一些变化或者是告知一些中奖名单等作用。 最近在复习CSS3动画部分内容,想着平时通知栏组件大部分还是用JS来实现,正好拿这块组件来当复习,下面写了三个小例子在此分享,欢迎大家观看,如有疑问,欢迎留言评论哈。 第一种 HTML部分

前端html小知识—marquee标签-爱代码爱编程

今天跟大家分享”前端html小知识—marquee标签“这篇文章,感兴趣的朋友接下来跟着云南仟龙Mark一起了解下吧。 该标签不是HTML3.2的一部分,只支持MSIE3后内核,所以如果使用非内核,IE内核浏览器(如:Netscape)你可能看不到以下有趣的效果 标签是容器标签 Marquee 公告滚动代码 基于最简单的网站公告滚动代码 Marque

marquee标签(文字循环滚动--头部广告)-爱代码爱编程

marquee(文字滚动)标签 marquee简介 <marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。 各个属

css3实现消息提示的滚动播放-爱代码爱编程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq

<marquee>标签,什么是marquee标签?-爱代码爱编程

首先,marquee是一个双标签,是HTML标签中创建文字滚动的标签。 示例效果图如下: 跑汽车 <marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等 behavior

vue3实现公告滚动效果_vue3 滚动通知-爱代码爱编程

工具:vue3 + ts + element-plus 1. 实现效果 2. 思路 代码逻辑实现起来挺简单,就是通过循环定时器,定时修改数据,然后通过vue的响应式渲染即可 3. 代码实现 <script lang="ts" setup> import {ref} from "vue"; import request fr