<!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=utf-8" />
<title>图片上下滚动</title>
<script>
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func();
  }
 }
}

// =S 图片向下滚动
function rollUp() {
 var speed=30;
 pic_box_r.innerHTML = pic_box.innerHTML;
 function Marquee1(){
  if(pic_box_r.offsetTop - butong_pic.scrollTop <= 0) {
   butong_pic.scrollTop -= pic_box.offsetHeight;
  } else {
   butong_pic.scrollTop++;
  }
 }
 var MyMar1 = setInterval(Marquee1,speed);
 butong_pic.onmouseover = function() {
  clearInterval(MyMar1);
 }
 butong_pic.onmouseout = function(){
  MyMar1 = setInterval(Marquee1,speed)
 }
}
addLoadEvent(rollUp); // =E 图片向下滚动

// =S 图片向上滚动
function scrollDown() {
 var speed = 30;
 pic_box_r2.innerHTML = pic_box2.innerHTML;
 butong_pic2.scrollTop = butong_pic2.scrollHeight;
 function Marquee2(){
  if(pic_box2.offsetTop - butong_pic2.scrollTop >= 0) {
   butong_pic2.scrollTop += pic_box_r2.offsetHeight;
  }
  else{
   butong_pic2.scrollTop--;
  }
 }
 var MyMar2 = setInterval(Marquee2,speed);
 butong_pic2.onmouseover = function() {
  clearInterval(MyMar2);
 }
 butong_pic2.onmouseout = function() {
  MyMar2=setInterval(Marquee2,speed);
 }
}
addLoadEvent(scrollDown); // =E 图片向上滚动

 </script>

<style>
#butong_pic, #butong_pic2 {
 overflow: hidden;
 width: 75px;
 height: 200px;
}
</style>
</head>

<body>
<!-- =S 图片向下滚动 -->
<div id="butong_pic">
 <div id="pic_box">
  <img src="pic1.gif" alt="图片1" />
  <img src="pic2.gif" alt="图片2" />
  <img src="pic3.gif" alt="图片3" />
  <img src="pic4.gif" alt="图片4" />
  <img src="pic5.gif" alt="图片5" />
  <img src="pic6.gif" alt="图片6" />
  <img src="pic7.gif" alt="图片7" />
  <img src="pic8.gif" alt="图片8" />
 </div>
<div id="pic_box_r"></div>
</div> <!-- =E 图片向下滚动 -->

<!-- =S图片向上滚动 -->
<div id="butong_pic2">
 <div id="pic_box2">
  <img src="pic1.gif" alt="图片1" />
  <img src="pic2.gif" alt="图片2" />
  <img src="pic3.gif" alt="图片3" />
  <img src="pic4.gif" alt="图片4" />
  <img src="pic5.gif" alt="图片5" />
  <img src="pic6.gif" alt="图片6" />
  <img src="pic7.gif" alt="图片7" />
  <img src="pic8.gif" alt="图片8" />
 </div>
<div id="pic_box_r2"></div>
</div> <!-- =E图片向上滚动 -->
</body>
</html>

 posted on 2008-10-22 15:51  刘卿  阅读(2049)  评论(0编辑  收藏  举报