用javascript实现图片的完美滚动

正好项目要用到这个特效。在网上查了一下相关代码，没有找到封装的特别好的代码，

于是花了个把小时，把网上的代码整理了一下，写了一个通用的。调用比较方便的js代码，希望对大家有用

可实现图片多种移动方式（向上，向下，向左，向右，）

同时能够做到同一页面多次调用，

调用方法：

//movetype移动方式
//1.向上
//2.向下
//3.向左
//4.向右
//
//使用说明：
//参数说明：对像名，显示宽度，显示高度，移动方式，移动速度
//var im = new ImgMove('ImgTemp','100','60',1,30);
//加入图片参数说明：图片url,图片宽度，高度，border,链接地址
//im.addImg('images/button_online.gif','100','60','0','http://www.sina.com.cn');//加入图片
//im.addImg('images/button_online.gif','100','60','0','');
//im.addImg('images/button_online.gif','100','60','0','');
//im.run();/
//
//
//
//

 

js如下：

 

/*--------------------------------------------------|
| img-move 1.0.1    http://www.bluestar-cn.com      |
|---------------------------------------------------|
| Copyright (c) 2002-2006                           |
|                                                   |
| Author : wuyang                                   |
|                                                   |
| Updated: 2005.12.10                               |
|--------------------------------------------------*/

//movetype移动方式
//1.向上
//2.向下
//3.向左
//4.向右
//
//使用说明：
//参数说明：对像名，显示宽度，显示高度，移动方式，移动速度
//var im = new ImgMove('ImgTemp','100','60',1,30);
//加入图片参数说明：图片url,图片宽度，高度，border,链接地址
//im.addImg('images/button_online.gif','100','60','0','http://www.sina.com.cn');//加入图片
//im.addImg('images/button_online.gif','100','60','0','');
//im.addImg('images/button_online.gif','100','60','0','');
//im.run();/
//
//
//
//

//创建对像,并初始化基础代码
function ImgMove(imgid,width,height,movetype,speed){
 this.moveType = movetype;
 this.imgId = imgid;
 this.moveSpeed = (speed==''?30:speed);
 document.write("<div id=img"+this.imgId+" style=overflow:hidden;height:"+height+";width:"+width+";>");
 if(this.moveType>2){
  document.write("<table align=left cellpadding=0 cellspace=0 border=0>");
  document.write("<tr>");
  document.write("<td id=img"+this.imgId+"TEMP valign=top>");
 }else{
  document.write("<div id=img"+this.imgId+"TEMP>");
 }
}

ImgMove.prototype.addImg = function(imgSrc,imgWidth,imgHeight,imgBorder,imgLink){
 if(imgLink!='')document.write("<a href=/""+imgLink+"/" _fcksavedurl="/""+imgLink+"/"" target=_blank>");
 document.write("<img src=/""+imgSrc+"/" width="+imgWidth+" height="+imgHeight+" border="+imgBorder+">");
 if(imgLink!='')document.write("</a>");
}

ImgMove.prototype.run = function(){
 if(this.moveType>2){
  document.write("</td>");
  document.write("<td id=img"+this.imgId+"NEW valign=top></td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("</div>");
 }else{
  document.write("</div>");
  document.write("<div id=img"+this.imgId+"NEW></div>");
  document.write("</div>");
 }

 if(this.moveType==1){
  this.moveUp();
 }else if(this.moveType==2){
  this.moveDown();
 }else if(this.moveType==3){
  this.moveLeft();
 }else if(this.moveType==4){
  this.moveRight();
 }
}

//向上移
ImgMove.prototype.moveUp = function(){
 var speed = this.moveSpeed;
 var moveimg = document.all("img"+this.imgId);
 var moveimg1 = document.all("img"+this.imgId+"TEMP");
 var moveimg2 = document.all("img"+this.imgId+"NEW");
 moveimg2.innerHTML=moveimg1.innerHTML;
 function Marquee(){
  if(moveimg2.offsetTop-moveimg.scrollTop<=0){
   moveimg.scrollTop-=moveimg1.offsetHeight;
  }else{
   moveimg.scrollTop++;
  }
 }
  var MyMar=setInterval(Marquee,speed);
  moveimg.οnmοuseοver=function() {
   clearInterval(MyMar);
  }
  moveimg.οnmοuseοut=function() {
   MyMar=setInterval(Marquee,speed);
  }
}

//向下移
ImgMove.prototype.moveDown = function(){
 var speed = this.moveSpeed;
 var moveimg = document.all("img"+this.imgId);
 var moveimg1 = document.all("img"+this.imgId+"TEMP");
 var moveimg2 = document.all("img"+this.imgId+"NEW");
 moveimg2.innerHTML=moveimg1.innerHTML;
 function Marquee(){
  if(moveimg.scrollTop<=0){
   moveimg.scrollTop+=moveimg1.offsetHeight;
  }else{
   moveimg.scrollTop--;
  }
 }
 var MyMar=setInterval(Marquee,speed);
 moveimg.οnmοuseοver=function() {
  clearInterval(MyMar);
 }
 moveimg.οnmοuseοut=function() {
  MyMar=setInterval(Marquee,speed);
 }
}

//向左移
ImgMove.prototype.moveLeft = function (){
 var speed = this.moveSpeed;
 var moveimg = document.all("img"+this.imgId);
 var moveimg1 = document.all("img"+this.imgId+"TEMP");
 var moveimg2 = document.all("img"+this.imgId+"NEW");
 moveimg2.innerHTML=moveimg1.innerHTML;
 function Marquee(){
  if(moveimg2.offsetWidth-moveimg.scrollLeft<=0)
   moveimg.scrollLeft-=moveimg1.offsetWidth;
  else{
   moveimg.scrollLeft++;
  }
 }
 var MyMar=setInterval(Marquee,speed);
 moveimg.οnmοuseοver=function() {
  clearInterval(MyMar);
 }
 moveimg.οnmοuseοut=function() {
  MyMar=setInterval(Marquee,speed);
 }
}

//向右移
ImgMove.prototype.moveRight = function (){
 var speed = this.moveSpeed;
 var moveimg = document.all("img"+this.imgId);
 var moveimg1 = document.all("img"+this.imgId+"TEMP");
 var moveimg2 = document.all("img"+this.imgId+"NEW");
 moveimg2.innerHTML=moveimg1.innerHTML;
 moveimg.scrollLeft=moveimg.scrollWidth;
 var MyMar=setInterval(Marquee,speed);
 moveimg.οnmοuseοver=function() {
  clearInterval(MyMar);
 }
 moveimg.οnmοuseοut=function() {
  MyMar=setInterval(Marquee,speed);
 }
 function Marquee(){
 if(moveimg.scrollLeft<=0)
  moveimg.scrollLeft+=moveimg2.offsetWidth;
 else{
  moveimg.scrollLeft--;
 }
 }
}