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

最新推荐文章于 2023-02-27 22:30:00 发布

wintershan

最新推荐文章于 2023-02-27 22:30:00 发布

阅读量514

点赞数

分类专栏：好好学习天天向上文章标签：公告 UP 活动 JavaScript XHTML ViewUI

好好学习天天向上专栏收录该内容

52 篇文章 0 订阅

订阅专栏

一、把下面代码放到<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' οnmοuseοver="this.stop()" οnmοuseοut="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>

这个地方“ οnmοuseοver="this.stop()" οnmοuseοut="this.start()" ”很关键，如果不加这个就不会点中时停止了。

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

<marquee scrollamount='1' scrolldelay='50' direction='UP' width='300' height='26' οnmοuseοver="this.stop()" οnmοuseοut="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  每次移动距离

wintershan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本循环滚动,放上鼠标后就自动停止

一、把下面代码放到&lt;body&gt;区域中&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&..
复制链接

扫一扫

专栏目录