js實現(xiàn)鼠標拖拽div左右滑動
更新時間：2020年01月15日 09:09:18 作者：LLLiiv
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標拖拽div左右滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js鼠標拖拽div左右滑動的具體代碼，供大家參考，具體內(nèi)容如下
<!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; //鼠標按下才能觸發(fā)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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)人臉檢測功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05![[換皮膚程序]一個比較使用的腳本程序](http://img.jbzj.com/images/xgimg/bcimg1.png)
[換皮膚程序]一個比較使用的腳本程序...2006-10-10
這篇文章主要為大家詳細介紹了JS返回頂部實例代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
奉獻給JavaScript初學者的編寫開發(fā)的七個細節(jié)
每種語言都有它特別的地方，對于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗的。本文利列舉了JavaScript初學者應該注意的七個細節(jié)，與大家分享。2011-01-01
這篇文章主要介紹了js如何實現(xiàn)input的賦值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了JS實戰(zhàn)篇之收縮菜單表單布局的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
本文主要對javascript如何如何獲取css樣式進行簡要分析，需要的朋友可以看下，希望對大家有所幫助2016-12-12
easywasmplayer實現(xiàn)視頻流播放示例詳解
這篇文章主要為大家介紹了easywasmplayer實現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了JavaScript表格常用操作方法,實例匯總了javascript中表格操作的創(chuàng)建、添加、刪除、遍歷等常用操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
$.browser.msie 為空或不是對象問題的多種解決方法
因為使用了jquery判斷ie，所以使用了$.browser.msie但是在jquery 1.9以后的版本中不再支持$.browser而使用$.browser來替代2017-03-03