<html>
<HEAD>
<TITLE>自动向上滚动的文本，鼠标放上去就停止</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
width:100%;
overflow:hidden;
font:12px/16px tahoma;
display:block;
text-decoration:none;
margin:2px;
color:#4a551c;
padding-left:2px;
text-align:left;
}
#demo a:hover {
color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:132px;width:400px; border:1px solid #dde5bc;">
<div id="demo1">
<a href="#">该特效代码完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">CMS建站网收集整理，希望大家多提意见</a>
<a href="#">该特效代码完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">CMS建站网收集整理，希望大家多提意见</a>
<a href="#">该特效代码完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">CMS建站网收集整理，希望大家多提意见</a>
<a href="#">该特效代码完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">CMS建站网收集整理，希望大家多提意见</a>
<a href="#">该特效代码完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">CMS建站网收集整理，希望大家多提意见</a>
<a href="#">该特效代码完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">CMS建站网收集整理，希望大家多提意见</a>
</div>
<div id="demo2"></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
分享到：
相关推荐
### JS 无缝滚动，鼠标放上去暂停代码 在前端开发中，实现文本或图片的无缝滚动效果是非常常见的需求之一，特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验，还能增加页面的吸引力。本文将详细...
在这个特定的案例中，我们关注的是一个文字特效，它具有自动向上滚动的功能，并且当鼠标悬停时会停止滚动。这种效果通常被用于新闻更新、公告栏或者网站的滚动标语等场景，既能吸引用户的注意力，又不会过于打扰他们...
"基于JS的文章按行向上滚动，鼠标经过时停止（间接性）"是一种常见的滚动特效，常用于公告、通知或者新闻滚动展示。这种效果使得信息能持续更新，同时在用户需要时提供交互性，避免打扰用户的阅读体验。 首先，我们...
在本篇内容中，我们将探讨如何利用jQuery实现一个文本上下无缝滚动的效果，并且在鼠标指针悬停在滚动文本上时停止滚动，鼠标移开时继续滚动。这个例子将涉及到jQuery的基本使用、动画效果的实现以及事件监听方法的...
<div id="scrollingText">这是无间隙向上滚动的文字</div> ``` CSS部分： ```css #scrollingText { overflow: hidden; height: 30px; /* 设置高度以显示一部分文本 */ animation: scrollUp 5s linear infinite; ...
- 实现一个能够自动向上滚动的列表。 - 在滚动过程中添加停顿效果，增强用户体验。 - 代码简洁、易懂，方便二次开发和维护。 ### 二、技术实现 #### 1. HTML结构 该代码采用标准的HTML文档结构，定义了一个包含...
在实际应用中，为了增加用户体验，我们可能还需要添加停止滚动的交互，比如鼠标悬停时暂停滚动，鼠标离开后恢复滚动。此外，还可以调整滚动速度、动画效果，甚至实现多行文字滚动等更复杂的特效。 文件名"texiao...
这个效果使得内容能够持续不断地从底部向上滚动，给用户带来连贯且吸引人的视觉体验。在本文中，我们将深入探讨如何使用jQuery库实现这一功能。 ### 1. jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了...
首先，向上滚动公告通常是利用JavaScript定时器（`setInterval`）来实现的，通过不断调整文本或元素的位置，使其看起来像从下往上滚动。以下是一个基本的向上滚动公告的实现步骤： 1. 创建HTML结构，例如一个包含...
CSS样式设置使这些div具有固定宽度、高度和边框，并且溢出隐藏，这样就可以在有限的空间内实现滚动效果。 接下来，JavaScript部分起到了关键作用。定义了一个名为`startmarquee`的函数，接受四个参数：`lh`(行高)，...
总结来说，jQuery文字滚动鼠标点击停止特效是一个结合了JavaScript事件处理和DOM操作的实例，它展示了jQuery在实现动态网页效果方面的强大能力。通过理解和实践这样的特效，开发者不仅可以提升自己的技能，也能为...
可能的实现方式是创建一个包含广告内容的div元素，然后使用JavaScript改变其top或bottom属性，以模拟向上滚动的效果。 其次，"向左滚动广告效果网页版.html" 文件很可能是另一种广告效果的实现，即广告内容从右到左...
在JavaScript编程中，实现"逐行向上滚动"的效果通常涉及到DOM操作、事件监听以及定时器的使用。这个功能常用于创建动态的文本展示效果，比如新闻滚动条或者公告栏。以下将详细介绍如何实现这一功能。 首先，我们...
在本案例中，我们将探讨如何使用jQuery实现多行滚动，尤其是向左或向上滚动，并且响应鼠标事件。 首先，我们需要理解基本的HTML和CSS结构。在给出的代码中，有两个`<div>`元素分别用作滚动区域，每个内部包含一个...
### 不间断向上滚动效果实现方法 #### 一、引言 在网页设计与开发过程中，为了提升用户体验和页面美观度，经常会用到各种动态效果。其中，“向上不间断滚动”是一种常见的需求，尤其是在新闻滚动、公告展示等场景下...
标题中的“JS实现排行榜文字向上滚动轮播效果”是指使用JavaScript编程语言来创建一个动态展示排行榜的文本滚动效果，文字会沿着垂直方向向上滚动，类似于常见的新闻滚动条。这种效果常用于显示有限空间内的大量信息...
HTML部分定义了滚动文本的结构，使用一个包裹容器（div元素），内部嵌套一个滚动容器（ul元素），再在滚动容器内部放入若干个列表项（li元素），每个列表项代表滚动文本中的一行。CSS用于设置滚动容器的尺寸和隐藏...
在这个例子中，网页内容被设置在一个固定高度的容器内，当内容超出容器高度时，会自动向上滚动，形成一种无缝滚动的效果。 首先，我们来看HTML部分。`<div id="div1">` 是包含滚动内容的外部容器，它的样式 `...
此外，还需要处理滚动方向（向上、向下、向左、向右）、滚动速度、暂停与恢复、鼠标悬停暂停等交互功能。 二、实现步骤 1. 创建HTML结构：首先，需要一个包含待滚动文字的容器元素，通常是一个div，设置好固定的...
3. **定义滚动函数**：接下来，定义`Marquee()`函数，该函数检查`demo1`的`offsetTop`与`demo`的`scrollTop`之间的关系，以决定是向上滚动还是继续向下滚动。当`demo1`的顶部位置等于或小于`demo`的滚动位置时，将`...