当前位置: 首页 > ds >正文

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

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

  • 使用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次后的弹窗
    在这里插入图片描述

http://www.xdnf.cn/news/11102.html

相关文章:

  • UIColor 常用方法
  • XML文件基础应用
  • MVC5 PartialView(部分视图)和模板页
  • 连接器(Netlink Connector)及其应用
  • 【python】Python语言程序设计/嵩天老师入门课程笔记整理
  • patch补丁文件格式
  • 山东大学高频电子线路实验三 正弦波振荡器实验详解_三点式正弦波振荡器实验报告(1)
  • [转]游戏外挂开发
  • python之torchlight使用_《火炬之光2》功能型MOD制作教程
  • 常用的开源网站框架
  • 计算机毕业设计Java彩票在线购买系统(源码+系统+mysql数据库+lw文档)
  • JSP自定义标签开发(五)——标签类获取 request 、 session
  • 思科模拟器-交换机与路由器的配置
  • MS08-067 漏洞利用与安全加固,高级网络安全程序员必会
  • Delphi中ExtractFilePath()及其相近函数用法
  • 【Typst】2.Typst标记语法和基础样式
  • easylogger的移植使用
  • Java高级 | 【实验一】Spring Boot安装及测试 最新
  • STM32单片机编程中标志变量的思想无处不在
  • pip安装python第三方库报错
  • 【python 中的Session 爬取数据案例实践——突发事件预警信息发布网数据抓取】
  • 使用 Python 制作 GIF 动图,并打包为 EXE 可执行程序
  • Ubuntu系统安装与配置NTP时间同步服务
  • 【Harmony OS】作业五 数据存储
  • leetcode题解98:验证二叉搜索树。(中序遍历!!!BST要点!)
  • RHEL7安装教程
  • 黑马程序员TypeScript课程笔记2(11-20)
  • 供应链攻击难以防范 供应商成“安全漏洞”
  • C# CallerMemberName特性
  • JavaScript 核心原理深度解析-不停留于表面的VUE等的使用!