javascript向上滚动(放上鼠标就停)

最新推荐文章于 2021-10-17 21:30:34 发布
最新推荐文章于 2021-10-17 21:30:34 发布
阅读量377 收藏
点赞数
文章标签： xhtml javascript ViewUI

本文使用Javascript实现DIV的内容不断的向上滚动，当鼠标移动到DIV上时，就停止滚动，当鼠标离开后又继续滚动。
主要使用了JS的setInterval 函数。



以下是完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript向上滚动(放上鼠标就停)--柯乐义</title>
</head>
<body>
<div id="keleyi_com" style="overflow:hidden;height:90px;width:350px;border:1px solid silver;padding:5px">
<div id="demo1">
<a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a><br />
<a href="http://www.keleyi.com/menu/javascript/" target="_blank">javascript</a><br />
<a href="http://www.keleyi.com/menu/jquery/" target="_blank">jquery</a><br />
<a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a><br />
<a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a><br />
<a href="http://www.keleyi.com/dev/4d233db8987beb38.htm" target="_blank">jquery四种选择器</a><br />
<a href="http://www.keleyi.com/dev/84501a98b64d8bb8.htm" target="_blank">Javascript获取页面的标题（title）</a><br />
<a href="http://www.keleyi.com/dev/da9ad054d87d5178.htm" target="_blank">jQuery向上弹出导航菜单</a><br />
<a href="http://www.keleyi.com/dev/d4fcaae705f598a.htm" target="_blank">javascript向上滚动(放上鼠标就停)</a><br />
<a href="http://www.keleyi.com" target="_blank">柯乐义</a><br />
</div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed = 50
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if (demo2.offsetTop - keleyi_com.scrollTop <= 0)
keleyi_com.scrollTop -= demo1.offsetHeight
else {
keleyi_com.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
keleyi_com.onmouseover = function () { clearInterval(MyMar) }
keleyi_com.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
</body>
</html>

weixin_34185320
关注
div自动滑动，鼠标移上停止滑动
qq_35606790的博客
06-14 2003
这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。 首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动. 这次我们就做滚动区域是平滑循环滚动效果。 下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示...
js实现表格自动滚动，鼠标放上去后停止滚动且可手动滚动
m0_50441807的博客
05-25 5236
scrollTop可以控制滚动的距离，可以设置一个永久定时器setInterval，每次执行定时器让scrollTop++，即可达到滚动的效果； 下面先理解js的几个属性：scrollHeight，offsetHeight，scrollTop，clientHeight
逐行向上滚动js代码，鼠标移上停止滚动,不满一屏的时候不滚动
08-30
逐行向上滚动js代码，鼠标移上停止滚动,不满一屏的时候不滚动
js 无缝滚动，鼠标放上去暂停代码
12-02
js 无缝滚动，鼠标放上去暂停代码，供大家学习和程序中使用
js 手写轮播列表-鼠标移入暂停滚动且可滚动列表，鼠标移出继滚动的位置继续轮播
yh8899abc的博客
10-17 1475
最近某个项目中要求的该奇葩的需求，要求列表轮播且鼠标移入暂停轮播且可以手动滚动列表，鼠标移出继续轮播 网上很多插件都满足了基本的轮播需求：轮播，鼠标移入暂停轮播，鼠标移出继续轮播，唯独这个需求没有满足，就是鼠标移入时，还可以手动滚动列表，于是我决定手写一个， 轮播实现的方式有很多种，可以用 transform、top来写，但为了这个特殊的需求，只有用scrollTop来实现了 html部分 // 外层容器 <div class="swiper-wrapper" ref="outterRef">
JS禁用鼠标滚动
m0_49039848的博客
09-12 1465
在网上找了一圈，愣是没找到不报错的禁用滚动。于是自己写了一个 以下的 document.querySelector("#big-box")为页面中最外层盒子 经测试绑定在body，html或者window上滚动会一直报这个错误 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See （由于目标被视为被动，无法在被动事件监听器中阻止缺省事
js 自动滚动,鼠标移动停止滚动
Dreams of JAVAD
05-09 2611
var timer; function pageScroller() { timer = setTimeout("pageScroller()",3000); if(timer!=""&&timer!=null){ console.log("begin"); $(document.body).animate({s
网页特效代码文字特效自动向上滚动的文本鼠标放上去就停止
11-23
在这个特定的案例中，我们关注的是一个文字特效，它具有自动向上滚动的功能，并且当鼠标悬停时会停止滚动。这种效果通常被用于新闻更新、公告栏或者网站的滚动标语等场景，既能吸引用户的注意力，又不会过于打扰他们...
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
10-27
在本案例中，我们将探讨如何使用jQuery实现多行滚动，尤其是向左或向上滚动，并且响应鼠标事件。 首先，我们需要理解基本的HTML和CSS结构。在给出的代码中，有两个`<div>`元素分别用作滚动区域，每个内部包含一个...
javascript跟随鼠标的文字带滚动效果
10-30
JavaScript鼠标跟随文字滚动效果 本文介绍了使用JavaScript实现鼠标跟随文字滚动效果的方法。该效果可以让文字在鼠标的周围滚动，增加用户体验。 知识点1：JavaScript中的Mousemove事件 在该示例中，我们使用了...
js 无缝向上滚动
09-27
js写的无缝向上滚动。利用div的复制和绝对定位等操作，完成这个特效
原生JS实现列表内容自动向上滚动效果
12-29
效果展示 （鼠标移入，滚动停止；鼠标移出，滚动继续） 实现原理 　　1. html结构：核心是ul > li，ul外层包裹着div。因为想要内容循环滚动无缝衔接，所以在原有ul后面还要有一个一样内容的ul。如下图： 　　   （红色边框为可视区域div，此处为了方便查看效果去除overflow:hidden；） 　　2. 样式方面：由于要滚动，所以必须2个ul的高度 > 外层可视div高度，且div必须设置overflow：hidden; 代码实现 HTML： <div id=review_box> <ul id=comment1> <li>第一条</li> <
基于JS的文章按行向上滚动,鼠标经过时停止（间接性）
08-17
使用js来控制的单行文字不断向上滚动,无间隙，当鼠标点击时，就自动停止滚动，适合公告以及信息公示使用
鼠标移上，文字滚动，移开则停止
02-03
鼠标移上，文字滚动，移开则停止. 防marquee 特效
滚动条响应鼠标滑轮事件实现上下滚动的js代码
10-25
在了解如何使用JavaScript代码实现滚动条响应鼠标滑轮事件以实现上下滚动之前，首先需要了解几个关键概念：滚动条、鼠标滑轮、事件以及如何在不同浏览器中处理这些事件。 首先，滚动条是网页中用于浏览超出视图区域...
JS实现排行榜文字向上滚动轮播效果
10-15
标题中的“JS实现排行榜文字向上滚动轮播效果”是指使用JavaScript编程语言来创建一个动态展示排行榜的文本滚动效果，文字会沿着垂直方向向上滚动，类似于常见的新闻滚动条。这种效果常用于显示有限空间内的大量信息...
js用一个按钮实现屏幕自动滚动和暂停
qq_44630015的博客
09-19 624
用一个按钮实现屏幕自动滚动和暂停 var btn = document.getElementById('start'); var key = true btn.onclick = function (){ if(key){ window.timer = setInterval(()=>{ window.scrollBy(0,100) },1000) btn.innerHTML = '暂停'
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
wangshfa的专栏
03-27 5352
需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示，离开后，继续滚动，具体实现如下，喜欢的朋友可以参考下 需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。  效果图：    上干货  html：  复制代码代码如下:     aaaaaaaaa
js实现文字向上自动循环滚动
wocao2dai的博客
09-22 4636
实现这个效果，需要注意给装文字的盒子，设置一个高度；还有外部的大盒子设置一个高度，向上滚动是用了scrollTop，通过设置偏移量，实现文字向上滚动。 详细代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
JavaScript实现上下左右连续滚动效果
如果不是，则逐步向上滚动。`setInterval(Marquee, speed)`设置了一个定时器，每隔一定时间（由`speed`决定）执行`Marquee`函数，实现连续滚动。当鼠标悬停在滚动区域(`demo`)上时，通过`onmouseover`事件停止滚动，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值