JavaScript

超轻量级php框架startmvc

js实现鼠标拖拽div左右滑动

更新时间:2020-09-30 02:54:01 作者:startmvc
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下<!DO

本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery.min.js"></script>
 <style>
 body{
 position: relative;
 margin:0;
 padding:0;
 width:100%;
 height: 1000px;
 }
 #box{
 height: 50px;
 width:200px;
 position: absolute;
 left:50%;
 top:50%;
 margin-left:-200px;
 margin-top:-200px;
 background: #CDCDCD;
 }
 #small-box{
 height: 50px;
 width:50px;
 position: absolute;
 left:0;
 top:0;
 background: #FF66CC;
 cursor:move ;
 opacity: 0.7;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="small-box"></div>
 </div>
<script>
 var box=$("#small-box");
 var body=$('body');
 var index=0;
 var x1;
 box.mousedown(function(){
 index=1; //鼠标按下才能触发onmousemove方法
 var x=event.clientX; //鼠标点击的坐标值,x
 var left= this.style.left;
 left=left.substr(0,left.length-2); //去掉px
 x1=parseInt(x-left);
 });
 box.mousemove(function(){
 if(index===1){
 this.style.left=event.clientX-x1+'px';
 if(this.style.left.substr(0,this.style.left.length-2)<0){
 this.style.left=0;
 };
 if(this.style.left.substr(0,this.style.left.length-2)>150){
 this.style.left='150px';
 };
 }
 });
 box.mouseup(function(){
 index=0;
 });
 body.mouseup(function(){
 index=0;
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

js鼠标拖拽左右滑动 js鼠标拖拽 js鼠标拖拽滑动