怎样用Dreamweaver做滚动图片？
- 提问者网友：战皆罪
- 2021-07-25 08:20
- 五星知识达人网友：有你哪都是故乡
- 2021-07-25 09:37
滚动图片和滚动文字的方法一样的。
<marquee direction=up height=75 onMouseOut=this.start() onMouseOver=this.stop() scrollamount=1 scrolldelay=100 width="180" id=MARQUEE1>滚动内容</marquee>
Direction 参数可设置:up down left right (控制滚动方向)
Scrolldelay = 100 (100就是速度，值越大滚动越快……)
onMouseOut=this.start() ........鼠标移出状态滚动
onMouseOver=this.stop() .........鼠标经过时停止滚动
基本语法
<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>
个人经营 http://bbs.886du.cn/欢迎交流。Q：464168089
- 1楼网友：慢性怪人
- 2021-07-25 16:27
- 2楼网友：渊鱼
- 2021-07-25 14:50
- 3楼网友：蕴藏春秋
- 2021-07-25 13:11
<!--图片滚动代码开始--> <div id=demo style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 551px; COLOR: #ffffff; HEIGHT: 138px"> <table cellPadding=0 align=center border=0 cellspace="0">
<tr> <td id=demo1 vAlign=top> <img border="0" height="80" src="/edit/UploadFile/200642610592911.gif" width="105" alt="舞蹈技巧"><img border="0" height="80" src="/edit/UploadFile/200642610592911.gif" width="105" alt="舞蹈技巧"><img border="0" height="80" src="/edit/UploadFile/200642610592911.gif" width="105" alt="舞蹈技巧"><img border="0" height="80" src="/edit/UploadFile/200642610592911.gif" width="105" alt="舞蹈技巧"> </td> <td id=demo2 vAlign=top></td> </tr> </table> <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> </div> <!--图片滚动代码结束--> 注：更改滚动方式，请修改相应未知的代码 倒数第8行 demo.scrollLeft++ 向左滚动 demo.scrollLeft-- 向右滚动 demo.scrolltop++ 向上滚动 demo.scrolltop-- 向下滚动
- 4楼网友：夜风逐马
- 2021-07-25 11:37
这个是横着滚动图片的代码一
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url] http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd[/url]"> <html xmlns="[url] http://www.w3.org/1999/xhtml[/url]"> <head> <style type="text/css"> body{ font-size:12px; } #MarqueePictues { border:#666666 1px solid ; text-align:center; } #MarqueePictues div{ margin-left:2px; border-left:#CCCCCC 1px dashed; text-align:center; vertical-align:middle; height:100px; line-height:100px; overflow:hidden; width:400px; } img{ height:90px; margin:5px; border:#DDDDDD 1px dashed; } </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向滚动</title> <script language="javascript"> function init() { var pics = document.getElementById("pictures").childNodes; var length = pics.length; ScrollPic.prototype.flag = 0; for(var i = 0 ; i < length ; i++) { // 兼容FireFox..... if(pics[i].tagName == "TD") { var td = document.createElement("TD"); td.innerHTML = pics[i].innerHTML; document.getElementById("pictures").appendChild(td); } } document.getElementById("pictures").onmouseover = function () { ScrollPic.prototype.flag = 1; } document.getElementById("pictures").onmouseout = function () { if(ScrollPic.prototype.flag = 1) { ScrollPic.prototype.flag = 0; ScrollPic(); } } ScrollPic(); }
function ScrollPic() { var layer = document.getElementById('MarqueePictues').getElementsByTagName("DIV")[0]; if(layer.scrollLeft++ == layer.scrollLeft) { //减去40效验图片滚动时候连接不短。自己慢慢调吧。我也不知道不同情况该减多少了........ layer.scrollLeft = layer.clientWidth/2 - 40; } if(ScrollPic.prototype.flag == 0) { setTimeout("ScrollPic()",10); } } </script> </head>
<body onload="init()"> <div id="MarqueePictues"> <div> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr id="pictures"> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/upload/2190.jpg[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/face/0.gif[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/upload/959.gif[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/upload/904.jpg[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/face/2.gif[/img]" /></td> </tr> </tbody> </table> </div> </div> </body> </html>
这个是横着滚动图片的代码二
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>水平滚动图片</title> <style> <!-- img{ height:100px; margin:5px; border:#DDDDDD 1px dashed; } --> </style> </head>
<body> <script type="text/javascript"> document.write('<table align=center width=774 border=0 cellpadding=0 cellspacing=0 style="BORDER-LEFT: #cccccc 1px dashed;BORDER-RIGHT: #cccccc 1px dashed">'); document.write(' <tr> '); document.write(' <td width=774 height=120 align=center bgcolor=#FFFFFF>'); document.write(' <div id=demo style="overflow:hidden;width:750;" align=center>'); document.write(' <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >'); document.write(' <tr>'); document.write(' <td valign=top bgcolor=ffffff id=marquePic1> '); document.write(' <table width=90% border=0 cellspacing=0 cellpadding=0>'); document.write(' <tr align=center> '); document.write(' <td><a href="#" target="new"><img src=1.jpg width=150 height=100 hspace=2 border=0></a></td>'); document.write(' <td><a href="#" target="new"><img src=2.jpg width=150 height=100 hspace=2 border=0></a></td>'); document.write(' <td><a href="#" target="new"><img src=4.jpg width=150 height=100 hspace=2 border=0></a></td>'); document.write(' <td><a href="#" target="new"><img src=5.jpg width=150 height=100 hspace=2 border=0></a></td>'); document.write(' <td><a href="#" target="new"><img src=6.jpg width=150 height=100 hspace=2 border=0></a></td>'); document.write(' </tr>'); document.write(' </table>'); document.write(' </td>'); document.write(' <td id=marquePic2 valign=top></td>'); document.write(' </tr>'); document.write(' </table>'); document.write(' </div>'); document.write(' </td>'); document.write(' </tr>'); document.write(' </table>'); var speed=30; var marquePic2=document.getElementById("marquePic2"); var marquePic1=document.getElementById("marquePic1"); var demo=document.getElementById("demo"); marquePic2.innerHTML=marquePic1.innerHTML; function Marquee(){ if(demo.scrollLeft>=marquePic1.scrollWidth){ demo.scrollLeft=0 }else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> </body> </html>
- 5楼网友：行路难
- 2021-07-25 10:11
到网上找相关的javascript的代码得到到网页上