Ⅰ html怎么用marquee无缝滚动和左右滚动
这个是属于html的标签,没办法去除无缝,要通过js来处理
Ⅱ marquee 如何让调用的内容无缝滚动
那个要用到JAVASCRIPT。你到网上查一下。叫不间断滚动代码!
Ⅲ html里marquee应该怎么改它的间歇性啊就是让它不停的滚动。
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制。
使用标记不仅可以移动文字,也可以移动图片,表格等.
语法:<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
代码示例:
<!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=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>
from
http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html
Ⅳ html/js 使用marquee标签,怎么可以做到无缝滚动
需要js的配合一下是一个非常好用的一个html代码,可以试试
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<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>
<ahref="#"target="_blank">jQuery类似腾讯网的图片幻灯特效(可自动播放)</a>
</li>
<li>
<ahref="#/JS"target="_blank">VB版增强型Windows任务管理器</a>
</li>
<li>
<ahref="#/JS/texiao"target="_blank">JQueryTip多风格链接提示框</a>
</li>
<li>
<ahref="#/JS/ad"target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a>
</li>
<li>
<ahref="#/html+css"target="_blank">++连连看游戏源码附外挂</a>
</li>
<li>
<ahref="#/"target="_blank">基于API的VBHOOK钩子拦截程序</a>
</li>
<li>
<ahref="#/"target="_blank">VB操作系统的一些常用小技巧集</a>
</li>
<li>
<ahref="#/js"target="_blank">xTree标准的WEB菜单树(树形菜单)</a>
</li>
</ul>
</DIV>
</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>
Ⅳ jquery marquee怎么无缝向左滚动
无缝滚动:
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on"></SPAN></MARQUEE>
左右滚动:
<marquee direction="right" behavior="alternate"><font size=30 color="red">我会左内右滚动哦容</font></marquee>
Ⅵ DW中如何使用marquee代码制作无缝滚动
不用js,达不到那种效果。
Ⅶ 怎么实现marquee标签的向上无缝滚动
<html>
<head>
<title>TODOsupplyatitle</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width">
</head>
<body>
<style>
#marqueep{height:30px;line-height:30px;margin:0}
</style>
<divstyle="height:30px;overflow:hidden;">
<divid='marquee'>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</div>
</div>
<script>
(function(){
varmarquee=document.getElementById('marquee');
varoffset=0;
varscrollheight=marquee.offsetHeight;
varfirstNode=marquee.children[0].cloneNode(true);
marquee.appendChild(firstNode);//还有这里
setInterval(function(){
if(offset==scrollheight){
offset=0;
}
marquee.style.marginTop="-"+offset+"px";
offset+=1;
},50);
})();
</script>
</body></html>
<divid="demo"style="overflow:hidden;height:168px;width:300px;">
<divid="demo1">
<!--此处放要显示的内容-->
</div>
<divid="demo2"></div>
</div>
<scriptlanguage="javascript">
varspeed=30;
vardemo2=document.getElementByIdx_x("demo2");
vardemo1=document.getElementByIdx_x("demo1");
vardemo=document.getElementByIdx_x("demo");
demo2.innerHTML=demo1.innerHTML;
functionMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight;
}
else{
demo.scrollTop++;
}
}
varMyMar=setInterval(Marquee,speed);
demo.onmouseover=function(){clearInterval(MyMar)};
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)};
</script>
——【仙】墨纸
Ⅷ asp中marquee 无缝滚动
<%
set rsm=server.createobject("adodb.recordset")
rsm.open "select * from [cf] order by cf desc",connb,1,1
%><script type="text/javascript">
document.write('<table align=center width=480 border=0 cellpadding=0 cellspacing=0 style=BORDER-LEFT: #cccccc 1px solid;BORDER-RIGHT: #cccccc 1px solid>');
document.write('<tr><td width=480 height=125 align=center class=border01 bgcolor=#FFFFFF>');
document.write('<div id=demo style=overflow:hidden;width:480;align=center>');
document.write('<table border=0 align=center cellpadding=0 cellspacing=0 cellspace=0 >');
document.write('<tr><td valign=top bgcolor=ffffff id=marquePic1> ');
document.write('<table width=480 border=0 cellspacing=0 cellpadding=0>');
document.write('<tr align=center> ');
document.write('<% do while not rsm.eof p=p+1%><td><%if not rsm("cf")="" then%><img src="<%=rsm("cf")%>" height="125" border="1" style="border-color:#ffffff;"><%else%><%end if%></td>');
document.write('<%if p=10 then exit do
rsm.movenext
loop%><%rsm.close%>');
document.write('</tr></table></td>');
document.write('<td id=marquePic2 valign=top></td></tr></table></div></td></tr></table>');
var speed=60
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
我是我在用的!没有问题很稳定,你改一下吧!
Ⅸ <marquee>能不能实现图片无间断滚动
在html中使得图片滚动方法很多,其中marquee使用的最多,marquee图片连续不间断滚动,可以向上、向下、向左、向右。通过以下四段不同方向滚动的代码,可以使得图片向不各个方向进行滚动。这里给出向左滚动的具体的事例
在看具体代码之前,了解一下对象的几个的属性:
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
图片向上无缝滚动
以下是具体代码:
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
<div id="demo">
<div id="demo1">
<a href="#"><img src="/66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
图片向下无缝滚动
以下是具体代码:
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="/66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
图片向左无缝滚动
以下是具体代码:
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="/66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
图片向右无缝滚动
以下是具体代码:
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="/66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
<a href="#"><img src="66php.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
Ⅹ marquee 无缝循环
<DIV id=demo style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 150px; COLOR: #0000ff; HEIGHT: 200px">
<DIV id=demo1>
<div align="center">
<A href="http://myok.bokee.com/..." target=_blank><IMG src="图片链接地址" border=0></A><br>
<A href="http://myok.bokee.com/..." target=_blank><IMG src="图片链接地址" border=0></A><br>
<A href="http://myok.bokee.com/..." target=_blank><IMG src="图片链接地址" border=0></A>
</div>
</DIV>
<DIV id=demo2></DIV>
</DIV>
<SCRIPT language="javascript">
var speed=50;
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>
DIRECTION:用于设定文本滚动的方向,可以设定的值有:LEFT,RIGHT。此属性不是必须使用的。
例:
[MARQUEE DIRECTION="LEFT" ]文字向左边滚动 [/MARQUEE]
[MARQUEE DIRECTION="RIGHT" ]文字向右边滚动 [/MARQUEE]
HEIGHT:用于设定滚动字幕的高度,高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例:
[MARQUEE HEIGHT="10%"] 滚动字幕的高度是可视页面的10%[ /MARQUEE]
[MARQUEE HEIGHT="12" ]滚动字幕的高度是12像素 [/MARQUEE]
WIDTH:用于设定字幕的宽度,宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例:
[MARQUEE WIDTH="90%"] 滚动字幕的宽度是可视页面的90% [/MARQUEE]
[MARQUEE WIDTH="200" ]滚动字幕的宽度是200像素 [/MARQUEE ]
HSPACE:用于设定滚动字幕左右的空白空间,空白空间用像素表示。此属性不是必须使用的。
例:
[MARQUEE HSPACE="15" ]滚动字幕左右空白空间为15个像素 [/MARQUEE]
VSPACE:用于设定滚动字幕上下的空白空间,空白空间用像素表示。此属性不是必须使用的。
例:
[MARQUEE VSPACE="2"] 滚动字幕上下的空白空间为2个像素 [/MARQUEE]
LOOP:用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。此属性不是必须使用的。
例:
[MARQUEE LOOP="-1" ]文字滚动无数次 [/MARQUEE]
[MARQUEE LOOP="5" ]文字滚动5次 [/MARQUEE]
SCROLLAMOUNT:用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。此属性不是必须使用的。
例:
[MARQUEE SCROLLAMOUNT="10"] 此文本后面的间隔为10个像素 [/MARQUEE]
SCROLLDELAY:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。此属性不是必须使用的。
例:
[MARQUEE SCROLLDELAY="5"] 此文本两次滚动之间的间隔时间为5毫秒 [/MARQUEE]
ONMOUSEOUT=this.start() :用来设置鼠标移出该区域时