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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
js function定义函数使用心得
Apr 15 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
js jquery数组介绍
Jul 15 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
javascript实现简单页面倒计时
Mar 02 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报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
php制作简单模版引擎
2016/04/07 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
Prototype Selector对象学习
2009/07/23 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
js常用代码段收集
2011/10/28 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Django中使用Celery的教程详解
2018/08/24 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
毕业生的自我评价
2013/12/30 职场文书
组织关系转移介绍信
2014/01/16 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
会计人员岗位职责
2014/03/19 职场文书
员工年终自我评价
2014/09/14 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers