消息关闭
    暂无新消息!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.dabox{
width:300px;
overflow: hidden;
}
.col{
width: 650px;
cursor: move;
border: 1px solid black;
}
p.examle{
width:200px;
column-width: 100px;
height: 200px;
margin-bottom: 0px;

}
</style>
</head>
<body>
<div class="dabox">
<div class="col">
<p class="examle">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内
容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是</p>
</div>
</div>
<script type="text/javascript">
    var col=document.querySelector(".col");
    var box=document.querySelector(".dabox");
    
        var key=0;
        var disX;
    var params={
     currentX:0,
     preX:0,
     odX:0,
     flag: false,
    }
    var getCss=function(o,key){
     return o.currentStyle?o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];
    };
    col.onmousedown=function(event){
     params.flag = true;
    
     if(!event){
     event=window.event;
     }
     var e=event;
     col.onselectstart=function(){
     return false;
     }
     if(params.odX!=0&&key==1){
        col.style.transform="translateX("+params.odX+"px)";
     }
        params.currentX=e.clientX;
    
    };
    document.onmouseup=function(event){
     var e = event ? event: window.event;
     params.flag=false;
     key=1;
                params.odX=disX;
    };
    document.onmousemove=function(event){
     var e = event ? event: window.event;
     if(params.flag){
     var nowX=e.clientX;
     disX =nowX - params.currentX;
     console.log(box.scrollWidth);
     if(disX>0&&box.scrollWidth>300){col.style.transform="translateX("+disX+"px)";}
                    if(box.scrollWidth==300&&disX<0){
                     disX=-352;
                     col.style.transform="translateX("+disX+"px)";
                    
                    }else if(box.scrollWidth>652&&disX>0){
                     disX=0;                    
                     col.style.transform="translateX("+disX+"px)";
                    }else{
                     if(params.odX!=0&&key==1){
                    
     disX=disX+params.odX;
          }
         col.style.transform="translateX("+disX+"px)";
                    }
     if(event.preventDefault){
     event.preventDefault();
     }
     return false;
     }
    }
</script>
</body>
</html>

1个回答