您的位置：首页 > 其它

图片上下左右滚动实例

2007-07-30 11:15 405 查看

向上滚动图片

<body>

<div id=demo style="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px">

<div id=demo1>

<img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 />

<img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 />

<img id="img2" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 />

<img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 />

<img id="img4" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 />

<img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 />

</div>

<div id=demo2>

</div>

</div>

<script language="javascript">...

var speed=1;

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>

</body>

向下滚动图片

<body>

<div id=demo style="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px">

<div id=demo1>

<img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 />

<img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 />

<img id="img2" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 />

<img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 />

<img id="img4" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 />

<img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 />

</div>

<div id=demo2>

</div>

</div>

<script>...

var speed=1

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>

</body>

向右滚动图片

<body>

<div id=demo style="background: #ffffff; overflow: hidden; width:670px; color: #0000ff; height: 500px">

<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td id="demo1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 /></td>

<td><img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 /></td>

<td><img id="img2" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 /></td>

<td><img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 /></td>

<td><img id="img4" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 /></td>

<td><img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 /></td>

</tr>

</table>

</td>

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

</tr>

</table>

</div>

<script>...

var speed=1

demo2.innerHTML=demo1.innerHTML

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>

</body>

向左滚动图片

<body>

<div id=demo style="background: #ffffff; overflow: hidden; width:670px; color: #0000ff; height: 500px">

<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td id="demo1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 /></td>

<td><img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 /></td>

<td><img id="img2" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 /></td>

<td><img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 /></td>

<td><img id="img4" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 /></td>

<td><img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 /></td>

</tr>

</table>

</td>

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

</tr>

</table>

</div>

<script language="javascript">...

var speed=1

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>

</body>

marquees方法向上滚动图片

<body>

<div id="marquees" style="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px">

<img id="img0" height=500px alt="" src="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg" width=375px border=0 />

<br>

<img id="img1" height=500px alt="" src="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg" width=375px border=0 />

<br>

<img id="img2" height=500px alt="" src="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg" width=375px border=0 />

<br>

<img id="img3" height=500px alt="" src="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg" width=375px border=0 />

<br>

<img id="img4" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg" width=375px border=0 />

<br>

<img id="img5" height=500px alt="" src="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg" width=375px border=0 />

<br>

</div>

<script language="JavaScript">...

marqueesHeight=200;

stopscroll=false;

with(marquees)...{

style.width=0;

style.height=marqueesHeight;

style.overflowX="visible";

style.overflowY="hidden";

noWrap=true;

onmouseover=new Function("stopscroll=true");

onmouseout=new Function("stopscroll=false");

}

document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init()...{

templayer.innerHTML="";

while(templayer.offsetHeight<marqueesHeight)...{

templayer.innerHTML+=marquees.innerHTML;

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

setInterval("scrollUp()",10);//越大越慢

}

document.body.onload=init;

function scrollUp()...{

if(stopscroll==true) return;

preTop=marquees.scrollTop;

marquees.scrollTop+=1;

if(preTop==marquees.scrollTop)...{

marquees.scrollTop=templayer.offsetHeight-marqueesHeight;

marquees.scrollTop+=1;

}

}

</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

添加评论
分享网址
分享文章
返回顶部