分享

图片移动代码集锦

 奋斗书房 2017-01-07
 


参数详解:


1)【scrollAmount】它表示速度,值越大速度越快。如果没有它,默认为6,建议设为scrollAmount=(13)比较好。


2)【widthheight】表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时


候,一定要设height的值。


3)【direction】表示滚动的方向,默认为从右向左:←←←。可选的值有rightdownup。滚动方


向分别为:direction=right表示→→→,direction=up表示↑,direction=down表示↓。


4)【scrollDelay】这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需


要设置的。


5)【behavior】用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片


效果,指的是滚动一次,然后停止滚动)


6)其他说明。marquee会移动、滚动的, center居中,top靠顶,bottom靠底,left靠左,……
 
注:移动宽度=图片宽度

一、向左移动
代码:

<marquee><img src=
图片地址><br>从右向左移动</marquee>


从右向左移动
 
 

示例:



二、向右移动
代码:
<marquee direction=right><img src=图片地址 width=200 height=294><br><font color=0000ff size=3 face=宋体><b>从左向右移动</b></font></marquee>

示例:


三、向上移动

代码:
<marquee direction=up onmouseover=this.stop() scrollamount=5 onmouseout=this.start()><center><img src=图片地址width=200 height=294></center></marquee>

示例:


四、向下移动

代码:

<marquee direction=down scrollamount=5><center><font color=0000ff size=5 face=华文行楷><b>向下移动</b></font><br><img src=图片地址 width=200 height=294></marquee>

示例:




 五、来回移动
代码:
<marquee width=100% behavior=alternate scrollamount=10><img src=图片地址 width=200 height=294><br><font color=0000ff size=5 face=华文行楷><b>来回移动</b></font></marquee>

示例:




六、上下起伏

代码:
<marquee direction=left><marquee behavior=alternate direction=up height=100><img src=
图片地址FLZdg==/486107284779580348.jpg><img src=图片地址><font color=0000ff size=3 face=华文行楷></b></font></marquee></marquee>

示例:







七、中间向两边移动:
代码:
<center><br><marquee width=200 height=294><img src=图片地址 width=200 height=294><font face=华文彩云 color=#0000ff size=5><br>中间向两边移动</font></marquee><marquee direction=right width=200 height=294><img src=图片地址 width=200 height=294><font face=华文彩云 color=#0000ff size=5><br>中间向两边移动<br></marquee></font></center>

示例:







八、中间相对上下移动:

代码:

<marquee direction=up onmouseover=this.stop() scrollamount=3 onmouseout=this.start><center><img src=图片地址 width=200></marquee></center><marquee direction=down scrollamount=3><center><div style="width:400;filter:flipv;"><img src="图片地址" width=200></div></center></marquee>

示例:



九、图片展开和收起

代码1:

<MARQUEE scrollAmount=3 direction=down height=228>
<MARQUEE scrollAmount=3 direction=up height=228><IMG style="DISPLAY: block; TEXT-ALIGN: center" src="http://userimage8.360doc.com/17/0106/23/21818599_201701062359040311453404.jpg"></MARQUEE></MARQUEE>

示例:


代码2:
<P align=center>
<MARQUEE scrollAmount=3 width=428 height=228>
<MARQUEE scrollAmount=3 direction=right width=428 height=228><IMG style="DISPLAY: block; TEXT-ALIGN: center" src="http://userimage8.360doc.com/17/0106/23/21818599_201701062359040311453404.jpg"
></MARQUEE></MARQUEE></P>

示例:


十、图片移动特效+Flash :
代码:
<P>
<TABLE border=0 cellPadding=0 width=396 background=http://image54.360doc.com/DownloadImg/2012/08/3114/26525116_8.jpgalign=center height=400>
<TBODY>
<TR>
<TD>
<DIV align=center>
<MARQUEE scrollAmount=2 height=400 width=596 direction=right><IMG style="FILTER: alpha WIDTH: 396px; HEIGHT: 400px" src="http://image91.360doc.com/DownloadImg/2015/11/2021/61820509_18.gif"><BR>从左向右移动</MARQUEE>
<P style="MARGIN-TOP: -410px; MARGIN-LEFT: 10px"></P><EMBED style="DISPLAY: block" height=400 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=590 src=http://www./xx/1/tun513.swf quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

示例:


从左向右移动



    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约