内容信息自动滚动，鼠标放上停止

最新推荐文章于 2019-12-19 17:41:05 发布

Excellence_

最新推荐文章于 2019-12-19 17:41:05 发布

阅读量346

点赞数

分类专栏：前台页面文章标签：ＭＶＣ内容自动滚动　Ｈｔｍｌ

本文链接：https://blog.youkuaiyun.com/Excellence_/article/details/95064241

版权

前台页面专栏收录该内容

4 篇文章

订阅专栏

本文提供了一个HTML代码示例，展示了如何使用marquee元素创建一个在鼠标悬停时停止滚动的文字滚动效果。通过简单的onmouseover和onmouseout事件，可以控制文字的滚动行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码演示：

HTML示例欢迎光临我的主页

鼠标经过上面时停止滚动

</center>
<marquee  onmouseover="this.stop()"  onmouseout="this.start()">哈哈哈哈哈哈   </marquee>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Excellence_

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js 自动滚动,鼠标移动停止滚动

Dreams of JAVAD

05-09

2698

var timer; function pageScroller() { timer = setTimeout("pageScroller()",3000); if(timer!=""&&timer!=null){ console.log("begin"); $(document.body).animate({s

js 手写轮播列表-鼠标移入暂停滚动且可滚动列表，鼠标移出继滚动的位置继续轮播

yh8899abc的博客

10-17

1582

最近某个项目中要求的该奇葩的需求，要求列表轮播且鼠标移入暂停轮播且可以手动滚动列表，鼠标移出继续轮播网上很多插件都满足了基本的轮播需求：轮播，鼠标移入暂停轮播，鼠标移出继续轮播，唯独这个需求没有满足，就是鼠标移入时，还可以手动滚动列表，于是我决定手写一个，轮播实现的方式有很多种，可以用 transform、top来写，但为了这个特殊的需求，只有用scrollTop来实现了 html部分 // 外层容器 <div class="swiper-wrapper" ref="outterRef">

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

jQuery实现列表自动循环滚动鼠标悬停时停止滚动

wangshfa的专栏

03-27

5401

需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示，离开后，继续滚动，具体实现如下，喜欢的朋友可以参考下需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。效果图：上干货 html：复制代码代码如下: aaaaaaaaa

图片自动循环滚动,鼠标滑过暂停

07-27

图片自动循环滚动,鼠标滑过暂停点击图可放大

前端摩天轮效果实现，鼠标移入停止，移出继续转动。

oliver666666的博客

04-15

2283

最近实现了摩天轮的效果，记录下实现原理与过程，备忘，分享。兼容性不高，IE10,11,Chrome41。 360浏览器(急速模式会有卡顿的感觉) 使用css3+js控制了摩天轮旋转，以及鼠标移入移出的停止动画的效果原理:css3中有旋转的特性 transform,可以用于控制一个元素的旋转。因此想要产生旋转的效果，先创建一个父级div（背景为一个圆），并且设置了旋转特性。...

图片上下左右自动滚动鼠标放上去停止

12-18

标题"图片上下左右自动滚动鼠标放上去停止"描述的是一种常见的网页交互设计，这种设计通常应用于图片展示或轮播图组件中，旨在提供一种吸引用户的视觉体验，同时兼顾用户在查看图片时的控制需求。这个效果的实现...

网页特效代码文字特效自动向上滚动的文本鼠标放上去就停止

11-23

在这个特定的案例中，我们关注的是一个文字特效，它具有自动向上滚动的功能，并且当鼠标悬停时会停止滚动。这种效果通常被用于新闻更新、公告栏或者网站的滚动标语等场景，既能吸引用户的注意力，又不会过于打扰他们...

自动向上滚动的文本，鼠标放上去就停止

09-13

这是有关自动向上滚动的文本小实验，鼠标放上去的就会停止，有需要的朋友可以看看

鼠标放到滚动的文字上面，滚动停止。鼠标移除，继续滚动

wszsj的博客

07-30

6828

代码：你想滚动的内容注释： scrolldelay是设置滚动速度，direction是设置滚动方向。 id='helpor_net' height='230' onmouseover='helpor_net.stop()' onmouseout='helpor_net.start()' Author:redriver; For more,

vue 实现无缝向左滚动鼠标悬停、离开时停止、开始滚动

Amandaandjack861007的专栏

12-19

3653

用的引用vue文件方式写的，可以改成组件代码 html代码： <div class="cont"> <div class="contlist" ref='contlist' @mouseover="stopScroll" @mouseout="startScroll"> <ul> <li v-for="(item, index) i...

自动向上滚动的文本，鼠标放上去就停止 div

zw7534313的专栏

09-10

1321

<html><HEAD><TITLE>自动向上滚动的文本，鼠标放上去就停止</TITLE><META content="text/html; charset=gb2312" http-equiv=Content-Type><STYLE type=text/css>#demo a {width:100%;overflow:h

vue实现消息的无缝滚动效果

热门推荐

yanby921005的博客

05-11

1万+

第一步在模板中使用v-for方法循环出消息列表<script> export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军"}, {name:"王勤"} ] } }, create...

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

oldmonk

06-05

2141

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

vue 组件监听鼠标滚动事件

Lei_zhen96的博客

04-15

7331

当需要组件模块化来渲染一个页面时，如果要监听当前组件的scroll事件，使用window.addEventListener('srcoll')是无效的，所以对当前组件采用监听滚动事件。如给当前div ref来获取当前的dom元素， <div class="bd" ref="viewBox"></div> 在mounted中，监听当前的滚动事件，然后进行相应的操...

鼠标移到向上或向下的图片上，文本自动滚动

gaulhor的专栏

07-23

2198

做这个程序，需要用到1个html,1个js,3张图片.中间的那篇文章是我的真实写照。我们开始做吧，首先写个demo.html:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Untitled Document.Container { positi

vue消息无缝滚动

decizi6266的博客

10-19

229

HTML： <div class="marquee"> 　　<ul class="nameList" :class="{anim:animate==true}"> 　　　　<li v-for='(item,index) in marqueeList' :key="index">{{item.name}}</li> 　　...

vue js 判断鼠标滚动到底部数据更新

weixin_33943347的博客

03-08

695

1.监听鼠标滚动时间 mounted() { window.addEventListener("scroll", this.handleScroll, true); }, 2.获取相关的高度判断鼠标滚动到浏览器的底部 handleScroll() { var scrollTop = document.documentElement.scrollTop || document...