注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

mooncake

QQ:416008500

 
 
 

日志

 
 
关于我

个人主页:http://user.qzone.qq.com/416008500 本人主营:办公软件 软件开发 VB编程 电脑组装 网络工程 电脑周边 办公器材 监控系统 门禁考勤 网站建设 网站维护 网页制作

网易考拉推荐

滚动图片与字幕的添加  

2007-04-23 21:17:31|  分类: 编辑博客的新方法 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

滚动图片与字幕的添加

分类: 表格字体 | 标签: 教你做博客

HTML代码]会移动的文字(Marquee)

Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。 

    格式: 

    <MARQUEE ALIGN="…" 

    BEHAVIOR="…" 

    BGCOLOR="…" 

    DIRECTION="…" 

    HEIGHT="…" 

    WIDTH="…" 

    HSPACE="…" 

    VSPACE="…" 

    LOOP="…" 

    SCROLLAMOUNT="…" 

    SCROLLDELAY="…" 

ONMOUSEOUT=this.start()

ONMOUSEOVER=this.stop()

    >… 

    </MARQUEE> 

   

    属性: 

    ALIGN:用于按设定的值对齐滚动的文本。ALIGN可以设定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此属性不是必须使用的。 

    例: 

    <MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE> 

   

   

    BEHAVIOR:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。如果设定为ALTERNATE,则文本从一边移动到另一边。如果设定为SCROLL,文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有:SILIDE,ALTERNATE,SCROLL。 

    例: 

    <MARQUEE BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE> 

   

   

    BGCOLOR:用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。 

    例: 

    <MARQUEE BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE> 

    <MARQUEE BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE> 

    <MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE> 

      

    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() :用来设置鼠标移出该区域时继续滚动

ONMOUSEOVER=this.stop():用来设置鼠标移入该区域时停止滚动

-------------------------------------------------------------

<TABLE height=393 cellSpacing=0 cellPadding=0 width=524 align=center bgColor=#d1f6db border=0><FONT size=4><FONT color=#990033></FONT></FONT>

<TBODY>

<TR><FONT size=4><FONT color=#990033></FONT></FONT>

<TD style="BORDER-RIGHT: 2px solid; PADDING-RIGHT: 1px; BORDER-TOP: 2px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: 2px solid; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: 2px solid" borderColor=#99ccff bgColor=#000000 colSpan=2 height=393>

<P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%">

<MARQUEE scrollDelay=100 direction=up height=393><IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756252.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756538.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756304.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756318.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756503.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756827.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756521.jpg"></MARQUEE></P><PRE style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 100%"></FONT></PRE></TD></TR></TBODY></TABLE>

------------------------------------------------------------

基本语法

<marquee> ... </marquee>

文字移动属性的设置

方向

<direction=#> #=left, right <marquee direction=left>从右向左移!</marquee>

方式

<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>

<marquee behavior=slide>只走一次就歇了!</marquee>

<marquee behavior=alternate>来回走</marquee>

循环

<loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走

3 趟</marquee>

<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>

<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>

速度

<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>

延时

<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!

</marquee>

外观(Layout)设置

对齐方式(Align)

<align=#> #=top, middle, bottom <font size=6>

<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>

</font>

底色

<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>

面积

<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>

 

空白

(Margins)<hspace=# vspace=#>

<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>

<marquee direction=up>我在向上走!</marquee>

<marquee direction=down>我又下向走了</marquee>

补充一个无缝连接的循环滚动

<html>

<head>

</head>

<body>

<TD WIDTH=390 HEIGHT=99><MARQUEE  scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>

            <SCRIPT language=JavaScript>

   for(t=1;t<=1000;t++)

   document.write("11111111111112222222222222222233333333333333")

  

            

</SCRIPT>

             </MARQUEE></TD>

</body>

</html>

另一种实现无缝连接循环滚动得方法

<div style=overflow:hidden;height:100px width:100px>

<div href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

width="80" height="80"

border="0"></a>

<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

width="80" height="80"

border="0"></a>

<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

width="80" height="80"

border="0"></a>

<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

width="80" height="80"

border="0"></a>

<a href="#" target="_blank">nudeangel_2</a>

<a href="#" target="_blank">nudeangel_3</a>

<a href="#" target="_blank">nudeangel_4</a>

<a href="#" target="_blank">nudeangel_5</a>

<a href="#" target="_blank">inudeangel_6</a>

<a href="#" target="_blank">nudeangel_7</a>

</div>

<div t=demo.scrollTop

demo2.innerHTML=demo1.innerHTML

function nudeangelMarquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else

demo.scrollTop++

}

var repeat=setInterval(nudeangelMarquee,50);

demo.onmouseover=function() {clearInterval(repeat);}

demo.onmouseout=function() {repeat=setInterval(nudeangelMarquee,50);}

-----------------------------------------------------------

<marquee><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>

最简单的图片移动特效———图片水平向左循环移动

:<marquee>

<img src="http://unibbs.unibbs.com/images/upphoto/647253.jpg">

<img src="http://unibbs.unibbs.com/images/upphoto/647264.jpg">

<img src="http://unibbs.unibbs.com/images/upphoto/647269.jpg">

<img src="http://unibbs.unibbs.com/images/upphoto/647247.jpg">

<img src="http://unibbs.unibbs.com/images/upphoto/648164.gif">

<img src="http://unibbs.unibbs.com/images/upphoto/648169.gif">

<img src="http://unibbs.unibbs.com/images/upphoto/648177.gif">

<img src="http://unibbs.unibbs.com/images/upphoto/648182.gif">

<img src="http://unibbs.unibbs.com/images/upphoto/648186.gif">

<img src="http://unibbs.unibbs.com/images/upphoto/648189.gif">

</marquee>

  评论这张
 
阅读(11)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017