整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
看下效果圖
1、給目標div增加鼠標按下事件，記錄下div對象的位置（left,top)和鼠標點擊的位置（x,y)
2、監聽鼠標移動事件，在移動過程中計算出鼠標的移動位置（nx,xy),然后實時計算出鼠標從點擊到現在的偏移量，然后再將div的位置修改，這樣就實現了div位置的變動
ps:目標div的屬性position要設置absolute或者relative
3、div可以移動了，但什么時候停止移動呢？當然是鼠標彈起的時候，所以我們監聽鼠標彈起的事件，并結束移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>div-drag-每天一個知識點</title>
<style>
.dragable {
width: 200px;
height: 200px;
border: 1px solid darkorchid;
position: relative;
}
</style>
</head>
<body>
<div class="dragable"></div>
</body>
<script>
var dragDiv=document.querySelector(".dragable");
dragDiv.addEventListener("mousedown", function(e) {
//獲取div初始位置對象
var divRect=dragDiv.getBoundingClientRect();
//獲取鼠標點擊的位置
var downX=e.clientX;
var downY=e.clientY;
//開關打開
var startMove=true;
//設置樣式為移動光標
dragDiv.style.cursor="move";
window.onmousemove=function(e) {
if (!startMove) {
return;
}
let newLeft=e.clientX - downX + divRect.left;
let newTop=e.clientY - downY + divRect.top;
dragDiv.style.left=newLeft + "px";
dragDiv.style.top=newTop + "px";
return false;
};
window.onmouseup=function(e) {
//結束移動
startMove=false;
dragDiv.style.cursor="default";
return false;
};
e.stopPropagation();
});
</script>
</html>
代碼手敲可運行
當然這個實現還有很多可擴展或者不足，比如怎么限制div移動的范圍，能力有限，在以后的日子里會嘗試編寫js組件，實現更完善的功能。
lt;!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transitionend事件</title>
<style>
/*為div設置寬高、背景色及過渡*/
#myDIV {
width: 50px;
height: 50px;
background: orange;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#myDIV:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>將鼠標移動到div元素上，查看過渡效果。</p>
<div id="myDIV"></div>
<script>
// Safari 3.1 到 6.0 版本代碼
var dom=document.getElementById("myDIV");
dom.addEventListener("webkitTransitionEnd", myFunction);
// 標準語法
dom.addEventListener("transitionend", myFunction);
// 事件回調函數
function myFunction() {
this.innerHTML='過渡效果結束';
this.style.background='red';
}
</script>
</body>
</html>
文實例講述了jQuery實現將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：
一、Js代碼：
onload=function () {
//初始化
scrollToLocation();
};
function scrollToLocation() {
var mainContainer=$('#thisMainPanel'),
scrollToContainer=mainContainer.find('.son-panel:last');//滾動到<div id="thisMainPanel">中類名為son-panel的最后一個div處
//scrollToContainer=mainContainer.find('.son-panel:eq(5)');//滾動到<div id="thisMainPanel">中類名為son-panel的第六個處
//非動畫效果
//mainContainer.scrollTop(
// scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
//);
//動畫效果
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 2000);//2秒滑動到指定位置
}
二、Html代碼：
<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
<div class="son-panel">我是類容區域-1</div>
<div class="son-panel">我是類容區域-2</div>
<div class="son-panel">我是類容區域-3</div>
<div class="son-panel">我是類容區域-4</div>
<div class="son-panel" style="height:160px;">我是類容區域-5</div>
<div class="son-panel">我是類容區域-6</div>
<div class="son-panel">我是類容區域-7</div>
<div class="son-panel">我是類容區域-8</div>
</div>
三. 相關知識
javascript中制作滾動代碼的常用屬性
1.網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;
2.假設 obj 為某個 HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。
例如：
<div id=”tool”>
<input type=”button” value=”提交”>
<input type=”button” value=”重置”>
</div>
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。
以上屬性在 FireFox 中也有效。
3.offsetTop 與 style.top 的區別
預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight
我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：
(1)offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
(2)offsetTop 只讀，而 style.top 可讀寫。
(3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
offsetWidth與style.width屬性的區別在于：如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.scrollLeft :
對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離．
即是在出現了橫向滾動條的情況下，滾動條拉動的距離．
scrollTop
對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離．
即是在出現了縱向滾動條的情況下，滾動條拉動的距離．
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
