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


     想自己实现一个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个的时候 就出现问题了。。。请问大虾。。这怎么改叻。。。

  • 相关阅读:
    JS实现前台表格排序功能
    openoffice安装手记
    OpenOffice 实现OFFICE在线预览
    毫秒事件转换小方法
    axis2 jar包详解及缺少jar包异常分析
    Android EditText控件完美实现只读(ReadOnly/NonEditable)
    android:获取联系人信息(姓名和电话)
    dex2jar.bat反编译apk的classes.dex文件错误:
    服务器压力测试系列二:服务器监控工具tsar安装
    memcache list all keys
  • 原文地址:https://www.cnblogs.com/blueSkys/p/2194420.html
Copyright © 2020-2023  润新知