html教程丨图片滚动或图片文字混合滚动

本文介绍图片滚动或图片文字混合滚动。


 1、图文相对滚动

你给献玫瑰玫瑰献给你

代码:

<div align=center><MARQUEE direction=right width=300 height=25>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_1.jpg ">
<FONT face=隶书 color=#ff0000  size=6>你给献玫瑰
<IMG src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_2.jpg>
</FONT></MARQUEE></FONT> <MARQUEE width=300 height=25>
<IMG src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_2.jpg>
<FONT face=隶书 color=#ff0000 size=6>玫瑰献给你
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_1.jpg ">
</FONT></MARQUEE></div>


2、图文循环滚动

轻轻的脚步,我轻轻的踩。轻轻的我走了,我又轻轻的来。我想带走天上那片云彩,把河畔的金柳抱回去重栽。这里有我许多的梦想,我不能空着手随便离开。

代码:

<div align=center><MARQUEE width=600 height=50  scrollamount="4">
<FONT face=隶书 color=#ff0000 size=5>轻轻的脚步,我轻轻的踩。轻轻的我走了,我又轻轻的来。
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_3.jpg">
<FONT face=隶书 color=#ff0000 size=5>
我想带走天上那片云彩,把河畔的金柳抱回去重栽。这里有我许多的梦想,我不能空着手随便离开。
</FONT></MARQUEE></div>


 3、飞舞的蝴蝶

填写标题填写标题填写标题

代码:

<table width="400" border="0" align="center">
<tr><td><div align="center" >
填写标题填写标题填写标题
</div></td></tr></table>
<marquee behavior="alternate"scrollamount=10 direction=right>
<MARQUEE behavior=alternate direction=up height=200 width=120>
<img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_4.jpg></MARQUEE>
<MARQUEE behavior=alternate direction=up height=250 width=120>
<img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_4.jpg></MARQUEE>
<MARQUEE behavior=alternate direction=up height=200 width=120>
<img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_4.jpg></MARQUEE>
<MARQUEE behavior=alternate direction=up height=250 width=120>
<img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_4.jpg></MARQUEE>
<MARQUEE behavior=alternate direction=up height=200 width=120>
<img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_4.jpg></MARQUEE>
<MARQUEE behavior=alternate direction=up height=250 width=120>


4、图片在方框里飘动

飞吻

代码:

<table width="450" border="0" align="center">
<tr><td><div align="center" >
飞吻(标题)
</div></td></tr></table>
<table align=center border=0 bordercolor="#" width=450 height=250>
<td background=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_29.jpg>
<marquee behavior=alternate scrollamount=3 direction=down width=445 height=245>
<marquee behavior=alternate scrollamount=3 width=450><font color=red size=6>
<img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_5.jpg>
</font></marquee></marquee></td></table>


5、图片百叶窗式滚动

填写标题填写标题填写标题


代码:

<table width="400" border="0" align="center">
<tr><td><div align="center" >
填写标题填写标题填写标题
</div></td></tr></table>
<br><TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
<TBODY><TR><TD align=middle>
<MARQUEE scrollAmount=5 scrollDelay=50 direction=right width=150>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_6.jpg">
</MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=5 scrollDelay=50 direction=right width=150>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_6.jpg">
</MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=5 scrollDelay=50 direction=right width=150>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_6.jpg">
</MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=5 scrollDelay=50 width=150>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_6.jpg">
</MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=5 scrollDelay=50 width=150>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_6.jpg">
</MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=5 scrollDelay=50 width=150>
<IMG src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_6.jpg">
</MARQUEE></TD></TR></TBODY></TABLE><BR><BR>


6、多图片交替跳跃

代码:

<CENTER>
<MARQUEE direction=up behavior=alternate width=125 height=120>
<CENTER><img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_7.jpg>
</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=125>
<CENTER><img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_7.jpg>
</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=125 height=120>
<CENTER><img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_7.jpg>
</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=125>
<CENTER><img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_7.jpg>
</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=125 height=120>
<CENTER><img src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_7.jpg>
</CENTER></MARQUEE></MARQUEE></FONT></CENTER>


7、图片在背景图片上滚动

代码:

<div align=center><table cellPadding=0 align=center 
background=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_30.jpg  border=2>
<tr><td><div>
<MARQUEE scrollAmount=4 direction=down width=490 height=296>
<MARQUEE scrollAmount=4 direction=up width=500 height=296>
<IMG style="FILTER: alpha WIDTH:500px; HEIGHT:296px" 
src=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_8.jpg>
</MARQUEE></MARQUEE></div></td></tr></table></div>

说明:做这样的效果,两张图片最好同样大小,如果图片大小不等,将图片修改一下。需指出的是,我这里的图片都是500×300,参数大家照样子设置即可。500-10=490,300-4=296,这里的10和4可以看着是固定的常数。


8、多图片循环滚动

代码:

<DIV align="center">
<MARQUEE width=90% height=120 onmouseover=stop() onmouseout=start() scrollAmount=5 loop=infinite deplay="0">

<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_9.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_10.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_11.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_12.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_13.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_14.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_15.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_16.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_17.jpg">
<img src="http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_18.jpg">

</MARQUEE></DIV>


  9、多图片在方框里循环滚动

这里写标题,不用标题可以删除

 

 

 

 

 

点击最后一张试试

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

代码:

<div align="center"><FONT face=宋体  color=#FF0000 size=4>
这里写标题,不用标题可以删除
</div>
<TABLE width=780  border=1 align="center" cellPadding=0 cellSpacing=20 bordercolor="#CE4300" background=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_31.jpg bgcolor="#FFBC9B">
<TBODY><TR><TD><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=5 background=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_32.jpg>
<TBODY><TR><TD align=middle><TABLE width=780 height=150 border=3 align="center" bordercolor="#FF0000" background=http://image48.360doc.com/DownloadImg/2011/12/1923/20154751_33.jpg bgcolor="#FFF2EC">
<TBODY><TR><TD><CENTER><P align=center><MARQUEE scrollAmount=4 width="100%" directio="left">

<IMG src="http://img.orz520.com/t013f377e630083414b.png">
<IMG src="http://img.orz520.com/t01b380e9951bbca4d5.png">
<IMG src="http://img.orz520.com/t0162273374745c53ea.png">
<IMG src="http://img.orz520.com/t01c1793d039cd6c904.png">
<IMG src="http://img.orz520.com/t01bd976da841dee3eb.png">
<IMG src="http://img.orz520.com/t01a340bbd406936cc7.png">
<IMG src="http://img.orz520.com/t01e1c152f326c78ac1.png">
<IMG src="http://img.orz520.com/t0186e826433691f7ff.png">
<IMG src="http://img.orz520.com/t0170613e6b567ac79e.png">
<IMG src="http://img.orz520.com/t017f02aebb45093d9f.png">

</MARQUEE></P></CENTER></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>



发布时间:2017-11-5 7:11 Sunday
  • 版权声明:除非注明,文章均为【皇朝博客网 - 集合网络各类精品资源 技术教程 各种珍藏福利的精品网站。】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:皇朝博客网 - 集合网络各类精品资源 技术教程 各种珍藏福利的精品网站。

    有没有那么一瞬间,想起好多人,回望身后,才发现错过好多人,错过好多事,错过好多好多。所以我现在努力珍惜留在我身边的人,我也曾试着去找回我失去的朋友,同学,等等,但都物是人非,以前我真的懒,聊天总是觉得无聊,觉得每天就那几句,吃了没,在干什么,等等,觉得毫无营养的话题。其实这只是借口,每天总有你能挤出来几分钟,哪怕随便聊聊,也不至于到现在,想找个人聊天,打电话都不知道找谁。其实,这也是维持友情,爱情,等关系的基础,现在想起来,晚了。总有那么几次你会有惊喜的事,悲伤的事,和他/她分享,总有那么一瞬间,你想找人

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复: