MARQUEE

最新推荐文章于 2019-06-12 18:01:47 发布
原创 最新推荐文章于 2019-06-12 18:01:47 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#behavior

本文介绍了一种使用HTML和CSS实现图片轮播的方法。通过设置特定的属性，可以使图片在页面上滚动展示，并且当鼠标悬停时停止滚动，移开鼠标后继续滚动。这种方法可以用于网站美化和个人主页设计。
<MARQUEE onmouseover=this.stop() onmouseout=this.start()
            scrollAmount=3 behavior=alternate width="100%" height=100><IMG
            height=100 src="images/02.jpg" width=100> <IMG height=100
            src="images/03.jpg" width=100> <IMG height=100
            src="images/04.jpg" width=100> <IMG height=100
            src="images/11.jpg" width=100> <IMG height=100
            src="images/12.jpg" width=100> <IMG height=100
            src="images/19.gif" width=94> <IMG height=100
            src="images/05.jpg" width=100> <IMG height=100
            src="images/17.jpg" width=100> <IMG height=100
            src="images/18.gif" width=88> <IMG height=100
            src="images/23.gif" width=121> <IMG height=100
            src="images/10.jpg" width=100> <IMG height=100
            src="images/25.gif" width=75> <IMG height=100
            src="images/08.jpg" width=100> <IMG height=100
            src="images/21.gif" width=118> <IMG height=100
            src="images/27.gif" width=147> <IMG height=100
            src="images/26.gif" width=78> <IMG height=100
            src="images/09.jpg" width=100><IMG height=100
            src="images/15.jpg" width=100> <IMG height=100
            src="images/11.jpg" width=100> <IMG height=100
            src="images/28.gif" width=115> <IMG height=100
            src="images/24.gif" width=96> <IMG height=100
            src="images/29.gif"
  width=119></MARQUEE> 
精选资源
微信小程序组件之marquee
03-29
1. marquee标签 html是有marquee标签的，可以实现跑马灯效果，但小程序没有，所以要实现。这里考虑使用css3的animation实现。 html的marquee是这样使用的。 "left" behavior="scroll" scrollamount="1" ...
Marquee3000:新千年的标志
05-13
MARQUEE3000 注意事项16.6.2020此模块现在已经是人类的年龄了！ 我非常高兴它已经为很多人所使用，并且在过去几年中，它被创造性地用于网络上一些非常酷的网站。 如果我不提供支持，除了趋向于报告与漏洞修复有关的...
滚动文字Marquee属性及参数设置
weixin_30266829的博客
03-09 675
滚动字幕Marquee代码大全 基本语法-------------------------------------------<marquee>滚动文字 </marquee>文字移动属性的设置方向<direction=#> #=left, right,up,down <marquee direction=left>从右向左移！</mar...
marquee参数详解
Welcome to here !
06-15 9086
2008-04-25 09:51（文字滚动）参数详解 文字滚动是由控制的。marquee的参数如下： 1、方向 #=left, right 如：啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ 2、方式 #=scroll, slide, alternate 如：啦啦啦，我一圈一圈绕着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ 3、循环 #=次数；...
滚动字幕特效大全代码 (转)
weixin_30338497的博客
05-26 2411
滚动字幕特效大全代码 把代码中的文字改为你的文字就可以了。 1.阴影滚动字 循环滚动: 欢迎来到农夫空间 代码: <marqueescrollamount=3 FONT style="COLOR=FF0000; FILTER: shadow(color=FFFF33 ); FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 10...
Marquee标签属性详解
boy_north的专栏
06-06 1万+
 Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器：　 　　　　格式：　 　　　　[MARQUEE　ALIGN="…"　 　　　　BEHAVIOR="…"　 　　　　BGCOLOR="…"　 　　　　DIRECTION="…"　 　　　　HEIGHT="…"　 　　　　WIDTH="…"　 　　　　HSPACE="…"　 　　　　VSPACE="…"　 　
详解vue 自定义marquee无缝滚动组件
10-17
在本文中，我们将深入探讨如何在 Vue 中自定义一个基于 `marquee` 的无缝滚动组件。`marquee` 是一种创建滚动文本效果的方式，常用于网站中展示不断滚动的信息，如新闻标题或广告。然而，HTML5 中的原生 `marquee` ...
react-marquee-master
05-02
React字幕大师 创建滚动字幕的简单组件。... 使用打字稿进行构建以... import Marquee from &#39;react-marquee-master&#39; ; 2。 添加字幕元素 < Marquee xss=removed> 单机版 您可以将node_modules/react-marquee-master/dis
HTMl 中marquee标签实现无缝滚动跑马灯效果
11-21
`<marquee>`标签的基本结构非常简单，由起始标签`<marquee>`和结束标签`</marquee>`组成，它们之间的内容将按照指定的属性进行滚动。以下是一些重要的`<marquee>`标签属性及其功能： 1. `direction`: 这个属性定义...
marquee|各种文字滚动代码(适用公告)
u010046887的专栏
05-06 1193
转载：http://www.cnblogs.com/mountain-mist/articles/975781.html 1.建立第一个滚动字幕。代码：SupeSite/X-Space官方站+TzmCx hi4tH 我钟意网页树树 %[%[;};I*N0效果如： 我钟意网页树树 2.各参数详解：SupeSite/X-Space官方站j(A7Uq1E%w9{
marquee标签各种文字滚动
xiao白的博客
06-12 1115
1.建立第一个滚动字幕。代码： <marquee scrollAmount=2 width=300>文字滚动</marquee> 2.各参数详解： a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6。 b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的...
《marquee的使用》15种滚动文字的代码
weixin_30947043的博客
12-19 556
1.文字来回滚动： 代码： <MARQUEE scrollAmount=3 behavior=alternate>文字来回滚动</MARQUEE> 2. 向右移动的竖排文字： 代码： <MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=3 scrollDelay=...
marquee基本语法的全解释
LEAVEOFF的专栏
03-22 868
marquee基本语法的全解释相关代码如下：基本语× ... 移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等 方向 #=left, right ,up ,down 从右向左移！ 方式 #=scroll, slide, alternate 一圈一圈绕着走！ 只走一次就歇了！ 来回走 循环 #=次数；若未指定则循环不止(infinite) 只走 3 趟 只走 3 趟
多媒体网页效果（一）————滚动文字Marquee属性及参数设置
开心每天，水滴石穿。
12-11 2621
滚动字幕Marquee代码大全 基本语法 ------------------------------------------- 滚动文字 文字移动属性的设置 方向 #=left, right,up,down 从右向左移！ 方式 #=scroll, slide, alternate 一圈一圈绕着走！ 只走一次就歇了！ 来回走 循环
会移动的文字(Marquee)
黑色伤
01-10 1183
会移动的文字(Marquee)  基本语法 ... 啦啦啦，我会移动耶！ 啦啦啦，我会移动耶！文字移动属性的设置 方向 #=left, right啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ 啦啦啦，我从右向左移！啦啦啦，我从左向右移！方式 #=scroll, slide, alterna
关于html:marquee属性的详解
bright_101的博客
08-04 1万+
标签           标签是成对出现的标签，首标签和尾标签之间的内容就是滚动内容。          标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。 一.  behavior属性          behavio
使用marquee标签实现文字滚动
老徐的博客只有干货
03-29 5437
代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body style="text-align: cen
html之marquee详解（超详细！）
热门推荐
Imust_can的专栏
11-10 2万+
该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果 该标签是个容器标签 语法： 以下是一个最简单的例子： 代码如下: Hello,World   下面这两个事件经常用到： onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onM
Marquee
最新发布
07-18
### HTML Marquee 标签的使用方法 `<marquee>` 是一个非标准的 HTML 标签，用于创建滚动文本或图像效果。尽管它在旧版浏览器中广泛支持，但由于其不属于 HTML5 标准，因此现代网页开发中不推荐使用。 基本语法如下： ```html <marquee>滚动内容</marquee> ``` 可以设置一些属性来控制滚动行为，例如 `direction`（方向）、`behavior`（行为）和 `scrollamount`（滚动速度）。以下是一个完整的示例： ```html <marquee direction="left" behavior="scroll" scrollamount="10">向左滚动的文字</marquee> ``` 该标签支持多种属性，包括但不限于： - `direction`：指定滚动方向（`left`, `right`, `up`, `down`） - `behavior`：定义滚动类型（`scroll`, `slide`, `alternate`） - `scrollamount`：控制滚动速度（数值越大越快） - `loop`：设定循环次数（默认为无限） 虽然 `<marquee>` 使用起来简单直观，但它缺乏良好的可访问性和响应式设计能力，并且无法通过 JavaScript 进行精细控制[^1]。 --- ### 替代方案 #### 1. 使用 CSS 实现滚动文本效果 CSS 提供了更加灵活的方式来实现滚动文本效果，尤其适用于现代 Web 开发中的响应式设计需求。可以通过 `@keyframes` 动画来实现横向滚动效果。 ```css .marquee { white-space: nowrap; overflow: hidden; box-sizing: border-box; width: 320px; } .marquee span { display: inline-block; padding-left: 100%; animation: marquee 10s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } ``` HTML 结构如下： ```html <div class="marquee"> <span>使用 CSS 实现的滚动文本</span> </div> ``` 此方法允许开发者完全控制动画的速度、持续时间以及重复方式，同时保持良好的跨浏览器兼容性[^1]。 --- #### 2. 使用 JavaScript/jQuery 实现滚动文本 对于需要更多交互功能的情况，可以借助 JavaScript 或 jQuery 来实现更复杂的滚动逻辑。下面是一个基于 jQuery 的简单实现示例： ```javascript $(document).ready(function() { $(&#39;.js-marquee&#39;).each(function() { var $this = $(this), textWidth = $this.find(&#39;span&#39;).width(), containerWidth = $this.width(); if (textWidth > containerWidth) { $this.append($this.html()); // 复制内容以实现无缝滚动 function animate() { $this.animate({ left: -textWidth }, 6000, &#39;linear&#39;, function() { $this.css(&#39;left&#39;, 0); animate(); }); } animate(); } }); }); ``` 对应的 HTML 和 CSS 如下： ```html <div style="width:320px; margin:30px auto; border:solid 1px #999;"> <div class="js-marquee"> <span>使用 JavaScript 实现的滚动文本</span> </div> </div> ``` ```css .js-marquee { position: relative; overflow: hidden; white-space: nowrap; height: 24px; } .js-marquee span { position: absolute; display: block; } ``` 这种方法提供了更高的灵活性，可以通过编程方式动态调整滚动行为，甚至可以根据用户的操作触发不同的滚动效果[^2]。 --- #### 3. 在 Vue 中实现滚动文本组件 如果你正在使用 Vue 框架进行开发，可以封装一个自定义组件来替代 `<marquee>` 标签。以下是基于 Vue 的实现思路： ```vue <template> <div class="vue-marquee" ref="container"> <div class="track" :style="{ transform: &#39;translateX(&#39; + offset + &#39;px)&#39; }"> {{ message }} </div> </div> </template> <script> export default { props: [&#39;message&#39;], data() { return { offset: 0, speed: 2 }; }, mounted() { this.startScroll(); }, methods: { startScroll() { const container = this.$refs.container; const track = document.querySelector(&#39;.track&#39;); const textWidth = track.offsetWidth; setInterval(() => { this.offset -= this.speed; if (Math.abs(this.offset) >= textWidth / 2) { this.offset = 0; } }, 30); } } }; </script> <style scoped> .vue-marquee { overflow: hidden; white-space: nowrap; width: 320px; margin: 30px auto; border: solid 1px #999; } .track { display: inline-block; transition: transform 0.5s linear; } </style> ``` 在页面中调用该组件的方式非常简单： ```vue <template> <div id="app"> <vue-marquee :message="msg"></vue-marquee> </div> </template> <script> import VueMarquee from &#39;./components/VueMarquee.vue&#39;; export default { components: { VueMarquee }, data() { return { msg: &#39;Vue 实现的滚动文本&#39; }; } }; </script> ``` 这种方式不仅符合 Vue 的组件化思想，还能够很好地与其他 Vue 特性集成，如数据绑定、生命周期钩子等[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值