关于HTML网页图片横向移动
发布网友
发布时间：2022-04-26 06:53
共4个回答
热心网友
时间：2022-06-24 22:34
HTML页面图片横向滚播效果：
<html><head><style>body{margin:0px;}ul{list-style:none; border:0; padding:0px; margin:0px;}li{list-style:none; float:left; border:0; padding:0px; margin:0px;}img{border:0px; padding:0px; margin:0px;}</style></head><body><center><div id="div1" style="overflow:hidden; cursor:hand; margin-top:50px;" onmouseover="stop()" onmouseout="ss()"> <ul id="img" style="clear:both;"><!--放图片的容器，此容器在div1里滚动--> <!--以下是要滚动的内容--> <li><img id="img0" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /></li> <li><img id="img1" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /></li> <li><img id="img2" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /></li> <li><img id="img3" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /></li> </ul> </div></center><script language="javascript">var w,h,id,speed,Htmlw=400;//-------滚动容器的宽度--------//h=100;//-------滚动容器的高度--------//id="div1";//-------滚动容器的id--------//direction="left";//-------滚动方向有四个值left，right，up，down，自己试试--------//speed="100";//-------滚动速度100相当于1秒，越小越快--------//imgDiv="img";//-------放图片的容器id--------//HtmlL=document.getElementById(imgDiv).innerHTML;HtmlT=document.getElementById(id).innerHTML;switch (direction){case "left": document.getElementById(imgDiv).innerHTML=HtmlL+HtmlL; break;case "right": document.getElementById(imgDiv).innerHTML=HtmlL+HtmlL; break;case "up": document.getElementById(id).innerHTML=HtmlT+HtmlT; break;case "down": document.getElementById(id).innerHTML=HtmlT+HtmlT; break;}function ss(){document.getElementById(id).style.width=w;document.getElementById(id).style.height=h;document.getElementById(imgDiv).style.width=w*2;document.getElementById(imgDiv).style.height=h;var eleele=document.getElementById("div1");switch (direction){case "left":ele.scrollLeft=ele.scrollLeft+5;if (ele.scrollLeft>=w){ele.scrollLeft=0;}break;case "right":ele.scrollLeft=ele.scrollLeft-5;if (ele.scrollLeft<=0){ele.scrollLeft=w;}break;case "up":ele.scrollTop=ele.scrollTop+5;if (ele.scrollTop>=h){ele.scrollTop=0;}break;case "down":ele.scrollTop=ele.scrollTop-5;if (ele.scrollTop<=0){ele.scrollTop=h;}break;}t=setTimeout("ss()",speed);}function stop(){document.getElementById("div1").scrollLeft=document.getElementById("div1").scrollLeft;document.getElementById("div1").scrollTop=document.getElementById("div1").scrollTop; clearTimeout(t);}setTimeout("ss()",100);</script></body></html><a href="rul">网站名称</a>
热心网友
时间：2022-06-24 22:35
基本语法
-------------------------------------------
<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>
鼠标响应：即鼠标指向就停，离开继续.
onmouseover="this.stop()" onmouseout="this.start()">
例如：<marquee direction=up scrollamount=2 onmouseover="this.stop();" onmouseout="this.start();" width=100 height=100>中华人民共和国中华人民共和国<br>www.cnzz.cc中国站长网欢迎您<br>我学会了，哈哈哈</marquee>
参考资料：http://e.cnzz.cc/webdesign/FreeHtml/152.html
热心网友
时间：2022-06-24 22:35
<div id=bar onmouseover="clearInterval(X)" onmouseout="X=setInterval(T,1)">
<table>
<td style="position: absolute; width: 100px; height: 100px; z-index: 10" id="l1"></td>
<td style="position: absolute; width: 100px; height: 100px; z-index: 10; left:500px;" id="l2"></td>
<style>.p{position:absolute;width}</style>
<table border="1" class=p style="left:100">
<tr>
<td class=p style='left:0' id=r1>1</td>
<td class=p style='left:50' id=r2>2</td>
<td class=p style='left:100' id=r3>3</td>
<td class=p style='left:150' id=r4>4</td>
<td class=p style='left:200' id=r5>5</td>
<td class=p style='left:250' id=r6>6</td>
<td class=p style='left:300' id=r7>7</td>
<td class=p style='left:350' id=r8>8</td>
<td class=p style='left:400' id=r9>9</td>
<td class=p style='left:450' id=r0>0</td>
</tr>
</table></table></div>
<script>
setTimeout("l1.style.backgroundColor='snow';l2.style.backgroundColor='snow'",1)
for(t=0,T="";t<=9;t++){T+="move('r"+t+"');"}/*表格数*/
X=setInterval(T,1)
function move(x)
{
with(document.getElementById(x).style){posWidth=30;posLeft++}
if(document.getElementById(x).style.posLeft>460){document.getElementById(x).style.posLeft=-50}
}
</script>
热心网友
时间：2022-06-24 22:36
