【html效果】使文字来回移动，当鼠标放上去停止

最新推荐文章于 2022-07-29 17:14:07 发布

hyjiang071194

最新推荐文章于 2022-07-29 17:14:07 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html/css/javascript 文章标签： html behavior

本文链接：https://blog.youkuaiyun.com/hyjiang071194/article/details/5372729

html/css/javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML的marquee元素实现的文字来回滚动效果，并详细解释了如何通过设置behavior属性为'alternate'来达到该效果。此外，还介绍了如何利用onmouseover和onmouseout事件让文字在鼠标悬停时停止滚动，在鼠标移开时继续滚动。

使文字来回移动，当鼠标放上去停止：

</marquee>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hyjiang071194

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

走马灯上下滚动，鼠标移入停止滚动

jieweiwujie的博客

05-31

603

走马灯上下滚动，鼠标移入停止滚动

鼠标移上，文字滚动，移开则停止

02-03

鼠标移上，文字滚动，移开则停止. 防marquee 特效

参与评论您还未登录，请先登录后发表或查看评论

页面背景

~缘份天空~

05-15

497

document.write ("")document.write ("偶然")document.write ("徐志摩 ")document.write (" ")document.write ("我是天空里的一片云，")document.write ("偶尔投影在你的波心—— ")document.write ("你不必讶异, ")document.write ("更无须欢喜—— "

html中滚动字幕暂停,marquee 滚动到文字上时停止滚动，自定义停止方法

weixin_34907135的博客

05-30

4370

我要实现的效果如下图：当鼠标移到续费提醒文字上时，文字滚动停止，并出现后面的关闭按钮；当鼠标移出文字时，文字继续滚动，后面的关闭按钮不显示。在网上查到的marquee停止滚动的的代码是这样的：SEOut="this.start()" onMouSEOver="this.stop()">onMouSEOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouSEOve...

html滚动字幕鼠标悬停,一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]...

weixin_34779845的博客

05-31

1277

网上找了很多，万变不离其宗，写法核心都是一样的，在这里我给大家总结一下，可收藏备用。html:公告一或中奖者甲公告二或中奖者乙公告三或中奖者丙解析：适用于只有一行显示的公告类，以及展示中奖名单/抽奖结果等大框类，改变list高度即可方案一：function autoScroll(obj) {$(obj).find(".list").animate({marginTop: "-25...

html滚动字幕鼠标悬停,js实现文字垂直滚动和鼠标悬停效果

weixin_34669890的博客

05-31

681

本文实例介绍了文字垂直滚动效果，主要运用了setInterval(function(){}, time);方法，分享给大家供大家参考，具体内容如下HTML布局:荐1高档社区，经典户型，机会难得，稍纵即逝！仅售66万！66万 3室2厅1卫 120㎡荐2高档社区，经典户型，机会难得，稍纵即逝！仅售66万！66万 3室2厅1卫 120㎡荐3高档社区，经典户型，机会难得，稍纵即逝！仅售66万！66万 ...

HTML5,CSS,JS前端常见知识面试题

珎珎啊

07-29

1423

前端常见面试题，前端知识总结，html,css,js,DOM

HTML5_02_数学公式_拖放_定位_多媒体

pre_eminent的JAVA学习园地

03-08

1164

HTML5 MathML 数学标记语言MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容</标签>）的用法。HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写...

《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案

m0_63394128的博客

03-14

1万+

什么是Web技术？答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。什么是Web前端？答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序...

JavaScript小案例程序保存（完整代码+效果展示）

xubuhui的博客

11-20

1万+

1.案例——点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换照片</title> </head> <body> <button id="btn">点我...

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

html代码实现自动滚动，鼠标滑过时停止滚动

oldmonk

06-05

2155

  1 <marquee style="width: 1200px;height:200px;margin:0px auto" onmouseout="this.start();" onmouseover="this.stop();"scrolldelay="100" direction="left"> 2

HTML代码之Marquee详解

larry的专栏

01-09

1289

Note.该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法：以下是一个最简单的例子：代码如下:Hello, World 下面这两个事件经常用到：onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动onMouseOve

自定义marquee组件实现无缝滚动&鼠标悬停效果

记笔记的小地方ヾ(๑╹◡╹)ﾉ"

12-03

1572

自定义marquee组件实现无缝滚动&鼠标悬停效果

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

weixin_30781631的博客

05-30

1181

这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动 . 这次我们就做滚动区域是平滑循环滚动效果。下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展...

html滚动字幕鼠标放上去就停止,鼠标放到滚动文字上时，文字停止滚动【代码】...

weixin_31484881的博客

06-01

3583

网页里面有滚动的图片，下边还带有文字说明，当鼠标移上去的时候会停住，用Dreamweaver怎么做？文字说明就是好好研究一下这段代码rs.open "select * from [product]",conn,1,1while not rs.eof%> " target="_blank">" alt="" width="90" height="90...

向上无缝滚动，鼠标放在上面会停止滚动

10-31

475

一般在页面上都会出现一条一条的通告，有些会使用向上滚动或者左右滚动的方式来展示，这样比较美观又不占位置；现在就说一下这个向上的无缝滚动怎么做 1：html <div class="two_fr_list"> <ul style="margin-top: -1px;"> <li>111111...

HTML 页面滚动时，部分内容位置固定不滚动

肖朋伟

04-05

1万+

HTML 页面滚动时，部分内容位置固定不滚动效果截图：页面源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无标题页</title> </head> <body style="width: 900px; ma...

html设置鼠标不能上下滚动条,鼠标上下滚动内容左右滚动不显示滚动条

weixin_35385409的博客

06-04

661

例：001.jpg002.jpg总部(中国)山东省德州市夏津县后屯乡镇*{list-style: none;padding: 0;margin: 0;box-sizing:border-box;font-size: 14px;color: #333;}.systemSelect{width: 340px;height: 38px;position: relative;padding-top: 8p...

易语言实现标签上下来回移动动画效果

为了实现标签上下来回移动的效果，可以利用易语言中的“定时器”组件，结合标签的位置属性（如Left、Top等）和改变这些属性的代码，从而达到移动的效果。下面是实现该功能的知识点： 1. **定时器（Timer）组件**：...