您的位置：首页 > Web前端 > JavaScript

一个面向对象的js问题 大家帮忙看看

2011-09-28 14:49 666 查看
想自己实现一个js图片的滚动效果 主要是根据dom_drag 这个插件 依葫芦画瓢 模仿下

/**
* @author jiashu
*/

var slide = {
obj:null,
obj_child1:null,
obj_child2:null,
time_id : null,
//div_id 住容器的ID scro_direction 图片滚动方向 speed 滚动速度
init:function(div_id,scro_direction,speed,width,height){
if(document.getElementById(div_id)==null){return false;}

var container = document.getElementById(div_id);//

var inner_html = container.innerHTML;
container.innerHTML = "";

var container_c1 = this.create_container("div",div_id+"1",inner_html);
this.obj_child1 = container_c1;//对第一个字容器进行处理

var container_c2 = this.create_container("div",div_id+"2",inner_html);
this.obj_child2 = container_c2;//对第二个子容器处理

container.appendChild(container_c1);
container.appendChild(container_c2);
container.style.overflow = "hidden";
container.style.width = width;
container.style.height = height;

container.scro_direction = scro_direction;
container.speed = speed;

this.start.call(container);
container.onmouseout = slide.start;
container.onmouseover = slide.stop;
},
stop : function(){
clearInterval(slide.time_id);
},
start:function(){
var con = slide.obj = this;
slide.time_id = setInterval(slide.top_do,con.speed);
},
top_do:function(){
if(slide.obj_child2.offsetTop- slide.obj.scrollTop <=0){
slide.obj.scrollTop -= slide.obj_child1.offsetHeight;
}
else {slide.obj.scrollTop ++;}
},
create_container:function(type,id,innerHTML){
var new_container = document.createElement(type);
new_container.id = id;
new_container.innerHTML = innerHTML;
return new_container;
}}

HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img_slide</title>
<script type="text/javascript" src="javascripts/slide.js"></script>
<script type="text/javascript">
window.onload = function(){
slide.init('con','top',30,'200px','200px');
//slide.init('coe','top',30,'200px','200px');
}
</script>
</head>
<body>
<h1>New Web Project Page</h1>
<div id="con">
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
</div>

<div id="coe">
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
</div>
</body>

</html>

现在一个问题出现了：

window.onload = function(){
slide.init('con','top',30,'200px','200px');
//slide.init('coe','top',30,'200px','200px');
}

是可以的 但是 当初始化2个的时候 就出现问题了。。。请问大虾。。这怎么改叻。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航