王朝知道
分享
 
 
 

纵向跑马灯怎么实现

王朝知道·作者佚名  2012-07-13  
宽屏版  字体: |||超大  
 
分类: 电脑/网络 >> 程序设计 >> 其他编程语言
 
问题描述:

纵向跑马灯怎么实现,如果带图片呢?

希望把所有属性都列出来,谢谢!~~

参考答案:

<marquee> ... </marquee>

移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

方向

<direction=#> #=left, right ,up ,down <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> <P>

<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 onmouseover=this.stop() onmouseout=this.start() >

鼠标放上去停止滚动,移开继续滚动。

</marquee>

鼠标放上去停止滚动,移开继续滚动。

<marquee direction=left scrollamount=3>

文字向左滚。

</marquee>

先制作向上滚动的效果:

插入代码:

<!-- 指向链接图片url -->

<base href="">

<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>

<div id=demo1>

<!-- 定义图片 -->

<img src="images/logo_1.gif">

<img src="images/logo/flashempire.gif">

<img src="images/logo.gif">

<img src="images/logo/5dmedia.gif">

<img src="images/logo/macromedia.gif">

<img src="images/logo/sucaiw.gif">

<img src="images/logo/blueieda.gif">

<img src="images/logo/htmlcn.gif">

<img src="images/logo/fwcn.gif">

</div>

<div id=demo2></div>

</div>

<script>

var speed=30

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>

制作向下滚动的效果:

将上面“制作向上滚动的效果”中的红色字体Js部分替换成:

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

制作向左滚动的效果:

<base href="">

<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>

<table align=left cellpadding=0 cellspace=0 border=0>

<tr>

<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif">

</td>

<td id=demo2 valign=top></td>

</tr>

</table>

</div>

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

制作向右滚动的效果:

将上面“制作向左滚动的效果”中的红色字体Js部分替换成:

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

小贴士:① 若网友所发内容与教科书相悖,请以教科书为准;② 若网友所发内容与科学常识、官方权威机构相悖,请以后者为准;③ 若网友所发内容不正确或者违背公序良俗,右下举报/纠错。
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
如何用java替换看不见的字符比如零宽空格&#8203;十六进制U+200B
 干货   2023-09-10
网页字号不能单数吗,网页字体大小为什么一般都是偶数
 干货   2023-09-06
java.lang.ArrayIndexOutOfBoundsException: 4096
 干货   2023-09-06
Noto Sans CJK SC字体下载地址
 干货   2023-08-30
window.navigator和navigator的区别是什么?
 干货   2023-08-23
js获取referer、useragent、浏览器语言
 干货   2023-08-23
oscache遇到404时会不会缓存?
 干货   2023-08-23
linux下用rm -rf *删除大量文件太慢怎么解决?
 干货   2023-08-08
刀郎新歌破世界纪录!
 娱乐   2023-08-01
js实现放大缩小页面
 干货   2023-07-31
生成式人工智能服务管理暂行办法
 百态   2023-07-31
英语学习:过去完成时The Past Perfect Tense举例说明
 干货   2023-07-31
Mysql常用sql命令语句整理
 干货   2023-07-30
科学家复活了46000年前的虫子
 探索   2023-07-29
英语学习:过去进行时The Past Continuous Tense举例说明
 干货   2023-07-28
meta name="applicable-device"告知页面适合哪种终端设备:PC端、移动端还是自适应
 干货   2023-07-28
只用css如何实现打字机特效?
 百态   2023-07-15
css怎么实现上下滚动
 干货   2023-06-28
canvas怎么画一个三角形?
 干货   2023-06-28
canvas怎么画一个椭圆形?
 干货   2023-06-28
canvas怎么画一个圆形?
 干货   2023-06-28
canvas怎么画一个正方形?
 干货   2023-06-28
中国河南省郑州市金水区蜘蛛爬虫ip大全
 干货   2023-06-22
javascript简易动态时间代码
 干货   2023-06-20
感谢员工的付出和激励的话怎么说?
 干货   2023-06-18
 
>>返回首页<<
 
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
© 2005- 王朝网络 版权所有