-
2007-06-12
javascript 图片滚动 - [网页制作]
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://chaochao.blogbus.com/logs/5806062.html
////////////////////////
//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.onmouseover=function() {
clearInterval(MyMar);
}
moveimg.onmouseout=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.onmouseover=function() {
clearInterval(MyMar);
}
moveimg.onmouseout=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.onmouseover=function() {
clearInterval(MyMar);
}
moveimg.onmouseout=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.onmouseover=function() {
clearInterval(MyMar);
}
moveimg.onmouseout=function() {
MyMar=setInterval(Marquee,speed);
}
function Marquee(){
if(moveimg.scrollLeft<=0)
moveimg.scrollLeft+=moveimg2.offsetWidth;
else{
moveimg.scrollLeft--;
}
}
}随机文章:
两个JAVASCRIPT 翻页例子 2007-06-27validation.js 一个基于prototype.js的验证框 2007-06-08javascript 获取滚动条高度 2007-05-29javascript删除数组元素. 2007-05-23javascript 尚未实现错误解决办法 2007-05-22
收藏到:Del.icio.us








评论