成長(zhǎng)前端初學(xué)者
2018-03-02 22:32:26
tBar.onmousedown?=?function()?{
var?eve?=?getEvent();
moveable?=?true;
//4.事件屬性是指事件所引發(fā)的狀態(tài)及事件本身特有的一些特性。
//clientX事件返回當(dāng)前事件被觸發(fā)時(shí)鼠標(biāo)指針向?qū)τ跒g覽器頁(yè)面的水平坐標(biāo)。
//pageX/pageY是鼠標(biāo)相對(duì)于整個(gè)頁(yè)面的X/Y坐標(biāo),整個(gè)頁(yè)面也就是你整個(gè)網(wǎng)頁(yè)的全部,比如你的網(wǎng)頁(yè)很長(zhǎng),那么最大值就是他們了
//clientX/clientY是事件發(fā)生時(shí)鼠標(biāo)在瀏覽器內(nèi)容區(qū)域的X/Y坐標(biāo),就是用來(lái)顯示網(wǎng)頁(yè)的可視區(qū)域,也就是說(shuō)需要拖動(dòng)滾動(dòng)條才能看到的不算,當(dāng)窗口大小改變時(shí),他倆的值也會(huì)改變。
mouseX?=?eve.clientX;
mouseY?=?eve.clientY;
toTop?=?parseInt(win.style.top);
toLeft?=?parseInt(win.style.left);
//事件二:移動(dòng)鼠標(biāo)事件
tBar.onmousemove?=?function()?{
if(moveable)?{
var?eve?=?getEvent();
var?x?=?toLeft?+?eve.clientX?-?mouseX;
var?y?=?toTop?+?eve.clientY?-?mouseY;
if(x?>?0?&&?(x?+?width?<?w)?&&?y?>?0?&&?(y?+?height?<?h)) ?{
win.style.left?=?x?+?"px";
win.style.top?=?y?+?"px";
}
}
}
//事件三:放下鼠標(biāo)事件,注意這里是document,而不是tBar
document.onmouseup?=?function()?{
moveable?=?false;
}那個(gè)移動(dòng)鼠標(biāo)事件的那些的什么意思,var x = toLeft + eve.clientX - mouseX; var y = toTop + eve.clientY - mouseY; if(x > 0 && (x + width < w) && y > 0 && (y + height < h)) { win.style.left = x + "px"; win.style.top = y + "px";
1 回答
已采納

QQ_隨意
TA貢獻(xiàn)51條經(jīng)驗(yàn) 獲得超28個(gè)贊
var?x?=?toLeft?+?eve.clientX?-?mouseX; //toLeft是被點(diǎn)擊物體離瀏覽器頂部的top距離 //eve.clientX是當(dāng)前鼠標(biāo)位於這個(gè)瀏覽器窗口左上角的距離 //mouseX是你鼠標(biāo)點(diǎn)擊時(shí)鼠標(biāo)位於這個(gè)瀏覽器窗口左上角的距離 //比如你當(dāng)前物體離瀏覽器左邊100px //你在150px的地方點(diǎn)擊進(jìn)行拖拽 //var?x?=?100?+?150?-?150; //然後你向左拖拽1px的時(shí)候?x?=?100?+?149?-?150; var?y?=?toTop?+?eve.clientY?-?mouseY; //同理 if(x?>?0?&&?(x?+?width?<?w)?&&?y?>?0?&&?(y?+?height?<?h)) //防止x和y的值小於0或者大於瀏覽器寬度(高度) //防止你拖拽的時(shí)候把問(wèn)題拉到瀏覽器外面
希望對(duì)你有幫助
添加回答
舉報(bào)
0/150
提交
取消