网页设计之图片滚动特效.docx

上传人:b****0 文档编号:17717070 上传时间:2023-08-03 格式:DOCX 页数:7 大小:83.72KB
下载 相关 举报
网页设计之图片滚动特效.docx_第1页
第1页 / 共7页
网页设计之图片滚动特效.docx_第2页
第2页 / 共7页
网页设计之图片滚动特效.docx_第3页
第3页 / 共7页
网页设计之图片滚动特效.docx_第4页
第4页 / 共7页
网页设计之图片滚动特效.docx_第5页
第5页 / 共7页
网页设计之图片滚动特效.docx_第6页
第6页 / 共7页
网页设计之图片滚动特效.docx_第7页
第7页 / 共7页
亲,该文档总共7页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

网页设计之图片滚动特效.docx

《网页设计之图片滚动特效.docx》由会员分享,可在线阅读,更多相关《网页设计之图片滚动特效.docx(7页珍藏版)》请在冰点文库上搜索。

网页设计之图片滚动特效.docx

网页设计之图片滚动特效

图片移动特效———图片水平向左循环移动

让网页文字动起来

Marquee标签滚动文本。

    格式如下:

 

    

    BEHAVIOR="…" 

    BGCOLOR="…" 

    DIRECTION="…" 

    HEIGHT="…" 

    WIDTH="…" 

    HSPACE="…" 

    VSPACE="…" 

    LOOP="…" 

    SCROLLAMOUNT="…" 

    SCROLLDELAY="…" 

ONMOUSEOUT=this.start()

ONMOUSEOVER=this.stop()

    >… 

     

   

    属性:

 

    ALIGN:

用于按设定的值对齐滚动的文本。

ALIGN可以设定的值有:

LEFT,CENTER,RIGHT,TOP,BOTTOM。

此属性不是必须使用的。

 

    例:

 

    这段滚动文字设定为上对齐 

   

   

    BEHAVIOR:

可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。

如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。

如果设定为ALTERNATE,则文本从一边移动到另一边。

如果设定为SCROLL,文本将在页面上反复滚动。

本属性不是必须使用的。

可以设定的值有:

SILIDE,ALTERNATE,SCROLL。

 

    例:

 

    文字从一边移动到另一边 

   

   

    BGCOLOR:

用于设定文字的背景颜色。

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

 

    例:

 

    用颜色名称设定滚动文字背景颜色为红色 

    用16进制值设定滚动文字背景颜色为红色 

    用RGB设定滚动文字背景颜色为红色 

      

    DIRECTION:

用于设定文本滚动的方向,可以设定的值有:

LEFT,RIGHT。

此属性不是必须使用的。

 

    例:

 

    文字向左边滚动 

    文字向右边滚动 

   

HEIGHT:

用于设定滚动文字的高度,高度可用像素或可视页面的百分比来表示。

此属性不是必须使用的。

 

    例:

 

    滚动文字的高度是可视页面的10% 

    滚动文字的高度是12像素 

      

    WIDTH:

用于设定文字的宽度,宽度可用像素或可视页面的百分比来表示。

此属性不是必须使用的。

 

    例:

 

    滚动文字的宽度是可视页面的90% 

    滚动文字的宽度是200像素 

      

    HSPACE:

用于设定滚动文字左右的空白空间,空白空间用像素表示。

此属性不是必须使用的。

 

    例:

 

    滚动文字左右空白空间为15个像素 

     

    VSPACE:

用于设定滚动文字上下的空白空间,空白空间用像素表示。

此属性不是必须使用的。

 

    例:

 

    滚动文字上下的空白空间为2个像素 

     

    LOOP:

用于设定滚动文字的滚动次数。

当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。

此属性不是必须使用的。

 

    例:

 

    文字滚动无数次 

    文字滚动5次 

   

    SCROLLAMOUNT:

用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。

此属性不是必须使用的。

 

    例:

 

    此文本后面的间隔为10个像素 

      

    SCROLLDELAY:

用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。

此属性不是必须使用的。

 

    例:

 

    此文本两次滚动之间的间隔时间为5毫秒

ONMOUSEOUT=this.start():

用来设置鼠标移出该区域时继续滚动

ONMOUSEOVER=this.stop():

用来设置鼠标移入该区域时停止滚动

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

1pxsolid;PADDING-RIGHT:

1px;BORDER-TOP:

1pxsolid;PADDING-LEFT:

1px;PADDING-BOTTOM:

1px;BORDER-LEFT:

1pxsolid;LINE-HEIGHT:

20px;PADDING-TOP:

1px;BORDER-BOTTOM:

1pxsolid"borderColor=#99ccffbgColor=#000000colSpan=2height=393>

-5px;MARGIN-BOTTOM:

-5px;LINE-HEIGHT:

100%">

0px;MARGIN-BOTTOM:

0px;LINE-HEIGHT:

100%">

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

基本语法

...

文字移动属性的设置

方向

#=left,right从右向左移!

方式

#=scroll,slide,alternate一圈一圈绕着走!

只走一次就歇了!

来回走

循环

#=次数;若未指定则循环不止(infinite)只走

3趟

只走3趟

只走3趟!

速度

啦啦啦,我走得好快哟!

延时

啦啦啦,我走一步,停一停!

外观(Layout)设置

对齐方式(Align)

#=top,middle,bottom

输入文字

底色

#=rrggbb16进制数码,或者是下列预定义色彩:

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

Fuchsia,White,Green,Purple,Silver,Yellow,Aqua颜色!

面积

面积!

 

空白

(Margins)

面积!

向上走!

下向走了

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

            

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

  document.write("文字")

  

            

            

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

hidden;height:

100pxwidth:

100px>

nudeangel_2

nudeangel_3

nudeangel_4

nudeangel_5

inudeangel_6

nudeangel_7

demo2.innerHTML=demo1.innerHTML

functionnudeangelMarquee(){

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

demo.scrollTop-=demo1.offsetHeight

else

demo.scrollTop++

}

varrepeat=setInterval(nudeangelMarquee,50);

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

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

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

#=scroll,slide,alternate一圈一圈绕着走!

 

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > IT计算机 > 电脑基础知识

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2