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


Posted in Javascript onJanuary 15, 2020

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

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

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>

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

Javascript 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jquery indexOf使用方法
Aug 19 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
微信小程序实现拍照和相册选取图片
May 09 Javascript
Vue数字输入框组件示例代码详解
Jan 15 #Javascript
Vue v-bind动态绑定class实例方法
Jan 15 #Javascript
JS 事件机制完整示例分析
Jan 15 #Javascript
JS实现滑动插件
Jan 15 #Javascript
JS实现滑动导航效果
Jan 14 #Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 #Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 #Javascript
You might like
浅析PHP水印技术
2007/02/14 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php命令行用法入门实例教程
2014/10/27 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP xpath()函数讲解
2019/02/11 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
CSS3 简写animation
2012/05/10 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
怎样声明接口
2014/09/19 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
项目副经理岗位职责
2013/12/30 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android