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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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&
-
js实现鼠标拖拽缩放div实例代码
封装为了jq插件,如下 drag.js ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts = $.extend(def,options);// 扩展参数,使用默认值或传参 //设置最大/最小宽度 var max_width = opts.maxW, min_width = opts.minW; //
-
js实现鼠标拖拽多选功能示例
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&
-
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果.分享给大家供大家参考,具体如下: 1. 鼠标拖拽盒子移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } div{ width: 1
-
使用javaScript实现鼠标拖拽事件
本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3
-
jquery实现鼠标拖拽滑动效果来选择数字的方法
本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
原生js拖拽功能制作滑动条实例代码
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: <div class="bar_wrap" id="wrap"><!--外包裹元素--> <div class="bar_container"><!--滑动条--> <div class=&qu
-
js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan
-
JS实现简单移动端鼠标拖拽
本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
-
JavaScript实现div的鼠标拖拽效果
本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下 实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re