87,993
社区成员
发帖
与我相关
我的任务
分享新手救助 这个JS拉倒最右边后始终回回弹到开始无法解决的bug
<!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>
<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>
...全文
请发表友善的回复…
发表回复
囧 2017-07-13
- 打赏
- 举报
chrome下测试正常
