`

文本循环滚动,放上鼠标后就自动停止

阅读更多

一、 把下面代码放到<body>区域中

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不停滚动——可用于公告</title>
</head>
<style type="text/css">
<!--
a {  font-size:12px; color:#123D8C; line-height:24px; cursor:pointer; }
a:hover { text-decoration:underline; color:red; }
-->
</style>
<body>
<SCRIPT language=JavaScript>  
<!--   
var index =15   
link = new Array(14); //链接数组
text = new Array(14);  //链接文字数组  
link[0] ='#'
link[1] ='#'
link[2] ='#'
link[3] ='#'
link[4] ='#'
link[5] ='#'
link[6] ='#'
link[7] ='#'
link[8] ='#'
link[9] ='#'
link[10] ='#'
link[11] ='#'
link[12] ='#'
link[13] ='#'
link[14] ='#' 
text[0] ='新闻一'   
text[1] ='新闻二'    
text[2] ='新闻三'    
text[3] ='新闻四'    
text[4] ='新闻五'    
text[5] ='新闻六'    
text[6] ='新闻七'    
text[7] ='新闻八'    
text[8] ='新闻九'    
text[9] ='新闻十'    
text[10] ='新闻十一'    
text[11] ='新闻十二'    
text[12] ='新闻十三'    
text[13] ='新闻十四'    
text[14] ='新闻十五'    
document.write ("<marquee scrollamount='1' scrolldelay='60' direction='UP' width='300' height='26' onmouseover="this.stop()" onmouseout="this.start()">");    
for (i=0;i<index;i++)   
{    
document.write ("<a herf="+link[i]+" target='_blank'>");    
document.write (text[i] + "</a><br>");    
}    
document.write ("</marquee>")    
//-->  
</SCRIPT>  
</body>
</html>

 这个地方“ onmouseover="this.stop()" onmouseout="this.start()" ”很关键,如果不加这个就不会点中时停止了。

 

 

二、这个简单很容易实现这种效果

<marquee scrollamount='1' scrolldelay='50' direction='UP' width='300' height='26' onmouseover="this.stop()" onmouseout="this.start()">   
      <a href=http://www.csdn.net/>csdn</a>  <br />   
      <a href=http://www.sina.com.cn/>sina</a>  <br />   
      <a href=http://www.sohu.com/>sohu</a>  <br />   
      <a href=http://www.163.com/>163</a>  <br />   
</marquee> 

 

附:关于marquee的属性介绍

    

 <marquee 
      aligh=left/center/right/top/bottom
  bgcolor=#n 
  font=n
  directon=left/right/up/down 
  behavior=type 
  height=n 
  hspace=n 
  scrollamount=n 
  Scrolldelay=n 
  width=n 
  VSpace=n
  loop=n>
</marquee>


  Bgcolor:用于设定活动字幕的背景颜色,一般是十六进制数。
  Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示从一端滚动到另一端;behavior="slide"表示从一端快速滑动到另一端,且不重复;behavior="alternate"表示在两端之间来回滚动。
  Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。
  Scrollamount:用于设定活动字幕一次滚动的距离。
  scrolldelay:用于设定滚动两次之间的延迟时间。
  Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。
〈marquee〉标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。

      direction  方向  top down left right
      scrollDelay  停留时间(毫秒)
      scrollAmount  每次移动距离

<!---->
 

分享到:
评论

相关推荐

    js 无缝滚动,鼠标放上去暂停代码

    ### JS 无缝滚动,鼠标放上去暂停代码 在前端开发中,实现文本或图片的无缝滚动效果是非常常见的需求之一,特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验,还能增加页面的吸引力。本文将详细...

    网页特效(文本向上循环滚动)

    #### 二、文本自动向上循环滚动实现原理 1. **HTML结构**:首先,我们需要创建一个`&lt;marquee&gt;`标签来包含滚动的文本内容。`&lt;marquee&gt;`是一个非标准的HTML标签,用于创建自动滚动的内容。 2. **CSS样式**:接下来,...

    wpf 实现textblock内容自动滚动动画

    然而,当文本内容过长,无法在控件的固定区域内完全显示时,我们可能需要实现一种自动滚动的效果,使得被遮盖的部分能够逐渐展现。这就是标题中提到的"wpf 实现textblock内容自动滚动动画"。 在WPF中实现TextBlock...

    vue,原生js左右无缝滚动

    移开鼠标后,滚动停止。中间部分的鼠标经过事件则用于暂停滚动,提供更好的用户体验。 要创建一个Vue组件,你需要定义一个名为`SeamlessScroll`的新组件,然后在Vue实例中注册它。组件的模板部分可以包含一个包含...

    js文字滚动制作js scroll单排文字滚动向上间歇滚动

    在实际应用中,为了增加用户体验,我们可能还需要添加停止滚动的交互,比如鼠标悬停时暂停滚动,鼠标离开后恢复滚动。此外,还可以调整滚动速度、动画效果,甚至实现多行文字滚动等更复杂的特效。 文件名"texiao...

    文字滚动代码教程

    - `onmouseover=this.stop()` 表示当鼠标移上区域的时候滚动停止 - `onmouseout=this.start()` 表示当鼠标移开的时候继续滚动 #### 四、示例代码详解 1. **文字来回滚动** ```html 文字来回滚动 ``` 此处...

    鼠标录制程序.zip

    通过录制鼠标点击、移动、滚动等行为,用户可以轻松创建一系列操作序列,之后只需播放这些序列,就能让计算机自动重复这些操作,节省大量手动操作的时间。 首先,我们要理解鼠标录制的基本原理。这种程序通常会监控...

    HTML中设定滚动效果的图

    根据提供的信息,我们可以深入...- 当鼠标悬停在文本区域上时,滚动暂停;鼠标移开时,滚动恢复。 通过上述对`&lt;marquee&gt;`标签及其各个属性的详细介绍,我们可以更好地理解和使用这个非标准但有时非常实用的HTML标签。

    用JavaScript和ASP制作连续滚动的字幕

    // 鼠标悬停时停止滚动 onmouseout = function() { stopScroll = false }; // 鼠标离开时恢复滚动 } // 初始化滚动内容 function init() { document.write(';z-index:1;visibility:hidden"&gt;'); // ...后续...

    易语言滚动公告源码.7z

    在实现滚动公告的过程中,会用到控制流语句,如循环(如“重复”、“直到”等),使得文本能够持续滚动直到达到预设条件,比如滚动完整篇公告或者到达一定时间后停止。 6. **用户交互** 源码可能还包括了用户交互...

    文字滚动代码 marquee style="WIDTH: 388px;

    循环滚动文本 ``` 这段代码中的文本将在指定区域内上下滚动。 ##### 示例 4:包含链接和图像 ```html &lt;a href="http://www.example.com"&gt;&lt;img src="image.jpg" alt="Example Image" /&gt; ``` 这个示例中的图像...

    滚动条条幅

    4. **停止滚动**:在用户将鼠标移至图片上时,通过清除定时器的方式停止图片的自动滚动,以增强用户的交互体验。这通常是通过在鼠标悬停事件中调用`clearTimeout()`方法来实现的。 5. **浏览器兼容性**:该方案特别...

    易语言任务栏滚动显示标题

    为了提供更好的用户体验,有时我们需要在任务栏上实现滚动显示窗口标题,即当鼠标悬停在任务栏图标上时,标题会在一定时间内自动滚动显示完整内容。 实现这个功能需要掌握以下几个关键知识点: 1. **窗口消息处理*...

    html、jsp中新建滚动字幕(跑马灯)及参数解析.pdf

    5) `behavior`:定义滚动行为,可选值有 `scroll`(循环滚动),`slide`(单次滚动后停止),`alternate`(在两端之间来回滚动)。默认值为 `scroll`。 6) `loop`:指定滚动的次数。如果设置为 `-1`,则会无限循环...

    简单实现网页图片无缝滚动

    - 通过`clearInterval`函数来控制鼠标悬停时停止滚动,鼠标离开后继续滚动。 #### 四、扩展与优化 除了以上基本的实现方式外,还可以通过以下几种方法进行扩展和优化: 1. **使用CSS动画代替`&lt;marquee&gt;`标签**:...

    无间断向左滚动jquery代码(走马灯)

    这可以通过监听用户的鼠标悬停事件实现,当鼠标悬停在走马灯上时,停止滚动;当鼠标离开时,恢复滚动。 在实际应用中,走马灯可能还需要考虑其他功能,比如添加导航点(小圆点)来指示当前显示的是哪个元素,或者...

    制作滚动字幕,很方便!

    5. **`behavior`**: 控制滚动行为,可选值有 `scroll`(无限循环)、`slide`(滚动一次后停止)和 `alternate`(来回滚动)。 ```html 滚动一次后停止 ``` #### 四、示例代码解析 根据给定的部分内容,可以看到...

    实现连续滚动文字效果,无间断

    这里还设置了一个鼠标悬停时暂停滚动的功能,即当用户的鼠标悬停在滚动区域上方时,会自动停止滚动,提高用户体验。 ### 数据加载与动态更新 除了基本的滚动功能外,案例中还涉及到了数据的动态加载。通过使用ASP...

    js文字滚动的详细解析

    2. **事件监听**:通过`onmouseover`和`onmouseout`事件监听器,我们实现了鼠标悬停时自动停止滚动的功能,增强了用户体验。 3. **定时器和延迟**:使用`setInterval`和`setTimeout`来控制滚动的速度和延迟。通过`...

    javascript js 鼠标事件 大全,js鼠标拖动事件,js鼠标移动事件.docx

    ### JavaScript鼠标事件详解 #### 一、概述 在前端开发中,JavaScript的鼠标事件是非常重要的交互方式之一。本文档详细介绍了各种鼠标事件及其应用场景,并扩展到了其他与用户交互相关的事件类型,例如键盘事件、...

Global site tag (gtag.js) - Google Analytics