图片搬动 _Web前端

图片移动

由下往上的：

<div?id="demo"?onmouseover="ij=1"?style="border:1px?solid?gray;?overflow:?hidden;?height:?119px;?width:211px?"?onmouseout="ij=0">

<div?id="demo1">1<br?/>2br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>

可以是任何的HTML内容<br>

<font?color="red">HTML</font><br>

</div>

<div?id="demo2"></div>

</div>

<script?type="text/javascript">

var?ij=0;t=demo.scrollTop

demo2.innerHTML=demo1.innerHTML

function?qswhMarquee2(){

if?(ij==1)return

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else

demo.scrollTop++

}

setInterval(qswhMarquee2,50)

</script>

由右往左的：

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>无标题文档</title>
</head>
<body>
<style>
.scroll_div?{width:600px;?height:62px;margin:0?auto;?overflow:?hidden;?white-space:?nowrap;?background:#ffffff;}
.scroll_div?img?{width:120px;height:60px;border:?0;margin:?auto?8px;?border:1px?#efefef?solid;}
#scroll_begin,?#scroll_end,?#scroll_begin?ul,?#scroll_end?ul,?#scroll_begin?ul?li,?#scroll_end?ul?li{display:inline;}/*设置ul和li横排*/
</style>
<script?language="javascript">
function?ScrollImgLeft(){
var?speed=20
var?scroll_begin?=?document.getElementById("scroll_begin");
var?scroll_end?=?document.getElementById("scroll_end");
var?scroll_div?=?document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function?Marquee(){
????if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
??????scroll_div.scrollLeft-=scroll_begin.offsetWidth
????else
??????scroll_div.scrollLeft++
}
var?MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function()?{clearInterval(MyMar)}
scroll_div.onmouseout=function()?{MyMar=setInterval(Marquee,speed)}
}
</script>
<h2?align="center">向左滚动</h2>
<div?style="text-align:center">
<div?class="sqBorder">
????
????<div?id="scroll_div"?class="scroll_div">
??????<div?id="scroll_begin">
????????<ul>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
??????????<li><a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a></li>
????????</ul>
??????</div>
??????<div?id="scroll_end"></div>
????</div>
????
</div>
<script?type="text/javascript">ScrollImgLeft();</script>
</div>

</body></html>

由右往左2：

<style>
#box1?{width:?500px;?border:1px?solid?#000;}
</style>
<div?id="box1">
<marquee?direction="left"?TrueSpeed?scrollamount="1"?scrolldelay="30"?onMouseOver="this.stop();"?onMouseOut="this.start();">
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
<a?href="http://www.1netmedia.net/"><img?src="http://bbs.blueidea.com/images/blue/logo.gif"?/></a>
</marquee>
</div>

上下左右的：

<!DOCTYPE?html?PUBLIC?"-//W3C//Dtd?XHTML?1.0?Transitional//EN"?"http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>无缝滚动</title>
<style?type="text/css">
img{
border:0;
height:100px;?width:150px;
}
td?img{
margin:0?10px;
}
</style>
</head>
<body>

<div?id="demo"?style="overflow:hidden;height:350px;width:200px">
<div?id="demo1">
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_01.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_02.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_03.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_04.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_05.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_06.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_07.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_08.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_10.jpg"></a><p>
<a?href="#"?target="_blank"><img?src="code/ym_scroll/gundong_11.jpg"></a><p>
</div>
<div?id="demo2">
</div>
</div>
<script>
var?speed=40;
var?demo2=document.getElementById("demo2");
var?demo1=document.getElementById("demo1");
var?demo=document.getElementById("demo");
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>

<div?style="margin-top:20px;">
<div?id="scroll_div"?style="overflow:?hidden;?WIDTH:?778px;"?align=center>
<table?border="0"?cellpadding="0"?cellspacing="0">
<tr>
????<td?id="scroll_begin">
<a?href="#"><img?src="code/ym_scroll/gundong_11.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_01.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_02.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_03.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_04.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_05.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_06.jpg"?border=0></a><a?href="#"><img?src="code/ym_scroll/gundong_07.jpg"?border=0></a></td>
????<td?id="scroll_end"></td>
</tr>
</table>
</div></div>
<script>
var?speed1=40
var?scroll_end?=?document.getElementById("scroll_end");
var?scroll_div?=?document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function?Marquee1(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else{
scroll_div.scrollLeft++
}
}
var?MyMar1=setInterval(Marquee1,speed1)
scroll_div.onmouseover=function()?{clearInterval(MyMar1)}
scroll_div.onmouseout=function()?{MyMar1=setInterval(Marquee1,speed1)}
</script>

</body>
</html>