 |
热门文章 |
|
|
|
|
| js封装的一个图片横向滚动效果 |
| 来源：蓝色理想 更新时间：2010/10/14 20:37:35 阅读次数： 我要投稿 |
|
<!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>
<style>
<!--
#film{ border:#39C 1px dashed}
#film a{ float:left; margin-right:3px; border:#CCC 3px solid;}
#film img{ border:none}
-->
</style>
<script type="text/javascript">
<!--
function Na(){
this.shw={
Id:0,Imgs:"",Links:"",aTarget:"_blank",bgColor:"#ffffff",Width:0,Height:0,imgWidth:"auto",imgHeight:"auto",moveSpeed:0,$:function(id){return document.getElementById(id);},
startMove:function(){
if(this.Id==0||this.Width==0||this.Height==0){alert("请检查参数是否设置完全！");return "";}
document.write("<div id=\"msg\"></div><div style=\"float:left;overflow:hidden;width:"+this.Width+"px;height:"+this.Height+"px;overflow:hidden;\" id=\""+this.Id+"\"><div style=\"float:left;width:800%;\"><div style=\"float:left;\" id=\"NaNaTemp\"></div><div style=\"float:left;\" id=\"NaNaTemp2\"></div></div></div>");
var imgs=this.Imgs.split("@");
for(var i=0;i<imgs.length;i++){
this.$("NaNaTemp2").innerHTML+="<a href=\"#\"><img style=\"width:"+this.imgWidth+"px;height:"+this.imgHeight+"px\" src=\""+imgs[i]+"\" /></a>";
}
var links=this.Links.split("@");
var fCount=(imgs.length>links.length)?links.length:imgs.length;
for(var i=0;i<fCount;i++){
var o=this.$("NaNaTemp2").getElementsByTagName("a");
o[i].href=links[i];
o[i].target=this.aTarget;
}
var d1=this.$(this.Id);
var d2=this.$("NaNaTemp");
var d3=this.$("NaNaTemp2");
var speed=this.moveSpeed;
function moves(){
d2.innerHTML=d3.innerHTML;
if(d3.offsetWidth-d1.scrollLeft<=0){
d1.scrollLeft=d1.scrollLeft-d2.offsetWidth;
}
else{
d1.scrollLeft=d1.scrollLeft+1;
}
}
var MyMar=setInterval(moves,speed);
d1.onmouseover=function() {clearInterval(MyMar)};
d1.onmouseout=function() {MyMar=setInterval(moves,speed)};
}
//---------------------
}
}
-->
</script>
</head>
<body text="#99CC00">
<script>
var myNa=new Na();
myNa.shw.Id="film"; //必写 为要生成的标签指定一个ID，这样就方便在你的css样式表中设置样式
myNa.shw.bgColor="#000000";//可选 背景颜色
myNa.shw.Width=600;//必写 生成的DIV的宽度
myNa.shw.Height=260; //必写 生成的DIV的高度
//myNa.shw.imgWidth=120; //可选 图片的宽度
myNa.shw.imgHeight=250;//可选 图片的高度
myNa.shw.moveSpeed=10;//必选 移动速度，建议使用这个速度
myNa.shw.Links="http://www.52-ni.cn@http://www.52-ni.cn@http://www.52-ni.cn@http://www.52-ni.cn@http://www.52-ni.cn@http://www.52-ni.cn";//图片地址，多张图片以@号隔开
myNa.shw.Imgs="http://www.cwydesign.com/effects/UploadFiles_7074/201010/2010101420391992.jpg@http://www.cwydesign.com/effects/UploadFiles_7074/201010/2010101420391984.jpg@http://www.cwydesign.com/effects/UploadFiles_7074/201010/2010101420391902.jpg@http://www.cwydesign.com/effects/UploadFiles_7074/201010/2010101420391936.jpg"; //图片的链接地址，多个地址以@号隔开
myNa.shw.startMove(); //启动播放
</script>
</body>
</html> |
| 特效说明： |
调用方法：
var myNa=new Na(); //初始化播放实例 Na()
myNa.shw.Id=”film”; //必写 为要生成的标签指定一个ID，这样就方便在你的css样式表中设置样式
myNa.shw.bgColor=”#000000″;//可选 背景颜色
myNa.shw.Width=600;//必写 生成的DIV的宽度
myNa.shw.Height=260; //必写 生成的DIV的高度
myNa.shw.imgWidth=120; //可选 图片的宽度
myNa.shw.imgHeight=250;//可选 图片的高度
myNa.shw.moveSpeed=10;//必选 移动速度，建议使用这个速度
myNa.shw.Links=”";//图片地址，多张图片以@号隔开
myNa.shw.Imgs=”"; //图片的链接地址，多个地址以@号隔开
myNa.shw.startMove(); //启动播放 |
|
| 上一篇文章： 让网页背景滚动的代码下一篇文章： 单击选项按钮改变网页背景颜色 |
|
|
|
注册 登录
