marquee(Js 实现 marquee 效果)

编程之家2024-05-2299次浏览

一、html/js 使用marquee标签,怎么可以做到无缝滚动

需要js的配合一下是一个非常好用的一个html代码,可以试试

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"">

<HTMLxmlns="">

<HEAD>

<TITLE>一行多列文字循环滚动带停顿-</TITLE>

<metaname="keywords"content="网页特效"/>

<metaname="description"content=""/>

<METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8">

<styletype="text/css">

ul{height:200px;

padding-right:0px;

padding-left:0px;

padding-bottom:0px;

margin:0px;

padding-top:0px

}

#announcement{

width:300px;

height:200px;

background:url(img/menu_bg.gif)repeat;

overflow:hidden;

}

#announcementdiv{

border:#e6e6e61pxsolid;

padding:0px10px0px10px;

overflow-y:hidden;

line-height:24px;

height:100px;

}

#announcementli{

font-size:12px;

float:left;

list-style-type:none;

margin-right:20px;

padding-left:10px;

background:url(img/arrow_right.gif)no-repeat0px50%;

white-space:nowrap

}

#announcementa{

text-decoration:none;

}

#announcementa:hover{

text-decoration:underline;

}

</style>

</HEAD>

<BODY>

<DIVid="announcement"onMouseOver="if(!anncount){clearTimeout(annst);annst=0}"onMouseOut="if(!annst)annst=setTimeout('announcementScroll()',anndelay);">

<DIVid="scrbody">

<ul>

<li>

<arel="external nofollow" href="#"target="_blank">jQuery类似腾讯网的图片幻灯特效（可自动播放）</a>

</li>

<li>

<arel="external nofollow" href="#/JS"target="_blank">VB版增强型Windows任务管理器</a>

</li>

<li>

<arel="external nofollow" href="#/JS/texiao"target="_blank">JQueryTip多风格链接提示框</a>

</li>

<li>

<arel="external nofollow" href="#/JS/ad"target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a>

</li>

<li>

<arel="external nofollow" href="#/html+css"target="_blank">++连连看游戏源码附外挂</a>

</li>

<li>

<arel="external nofollow" rel="external nofollow" href="#/"target="_blank">基于API的VBHOOK钩子拦截程序</a>

</li>

<li>

<arel="external nofollow" rel="external nofollow" href="#/"target="_blank">VB操作系统的一些常用小技巧集</a>

</li>

<li>

<arel="external nofollow" href="#/js"target="_blank">xTree标准的WEB菜单树（树形菜单）</a>

</li>

</ul>

</DIV>

<scripttype="text/javascript">

function$(id)

{

returndocument.getElementById(id);

}

varanndelay=3000;

varanncount=0;

varannheight=24;

varannst=0;

functionannouncementScroll()

{

if(!annst)

{

$('scrbody').innerHTML+='<brstyle="clear:both"/>'+

$('scrbody').innerHTML;

$('scrbody').scrollTop=0;

if($('scrbody').scrollHeight>annheight*3)

{

annst=setTimeout('announcementScroll()',anndelay);

}

else

{

$('announcement').onmouseover=$('announcement').onmouseout=null;

}

return;

}

if(anncount==annheight)

{

if($('scrbody').scrollHeight-annheight<=$('scrbody').scrollTop)

{

$('scrbody').scrollTop=$('scrbody').scrollHeight/2-annheight;

}

anncount=0;

annst=setTimeout('announcementScroll()',anndelay);

}

else

{

$('scrbody').scrollTop++;

anncount++;

annst=setTimeout('announcementScroll()',10);

}

announcementScroll();

</script>

</BODY>

</HTML>

二、HTML标签marquee实现多种滚动效果

页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签- marquee/marquee可以实现多种滚动效果，无需js控制。

使用marquee标记不仅可以移动文字，也可以移动图片，表格等.

语法：marquee.../marquee；说明：在标记之间添加要进行滚动的内容。

重要属性：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

语法：marquee direction="滚动方向".../marquee

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

语法：marquee behavior="滚动方式".../marquee

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

语法：marquee scrollamount="5".../marquee

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

语法：marquee scrolldelay="100".../marquee

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

语法：marquee loop="2".../marquee

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

JavaScript Code复制内容到剪贴板

!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"" xmlns=" http-equiv="Content-Type" content="text/html; charset=utf-8"/ title无标题文档/title /head body div marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10" 指整个Marquee对齐方式;(2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复... /marquee /div /body /html

三、marquee实现首尾相接循环走马灯效果网页脚本的

marquee的用法是

<marquee属性>要滚动的文字图片</marquee>

但不管你用marquee的什么属性,都只能实现滚动效果,但不能实现首尾相接循环走马灯效果;你要实现首尾相接循环走动效果,那真的只有借助JavaScript脚本，即是js代码。

下面我给出一个结合marquee和JavaScript来实现首尾相接循环走动效果代码及其实现方法:

1.首先你要先建一个文件夹，比如名为“gundong”的文件夹，再建两个名为“js”和“images”的子文件夹。

2.用记事本将下面的js代码复制进去，保存在js子文件夹下;文件名为scrollpic.js

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed3)

demo.onmouseover=function(){clearInterval(MyMar)}

demo.onmouseout=function(){MyMar=setInterval(Marquee,speed3)}

3.用记事本将下面的html代码复制进去，保存在gundong根文件夹下,文件名为index.htm

<html>

<head>

<title>;

td{font-size: 12px;}

</style>

</head>

<body>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<tr>

</div></td>

</tr>

</table></TD>

</TD></TR></TBODY></TABLE></TD></TR></TABLE>

</CENTER>

</BODY></HTML>

4.在images文件夹中法如一张名为pic_bg.jpg的图片.

注意上面文件的文件名和后缀要保存正确，不要改动，如果改动了，就要修改代码里的路径才能正确显示的，其实也不难。

诺基亚5700手机(诺基亚5700手机有哪些功能)网易云音乐等级怎么刷网易云音乐刷听歌次数