用jQuery做拖放和鍵盤位移

2021-09-14 04:21:15 字數 1026 閱讀 9490

這個特效就是頁面中有乙個div方塊,用滑鼠拖動改變它的位置,同時也可以用鍵盤的上下左右鍵控制它的走向,這個特效在遊戲中用的挺多的。這個特效我分為倆部分來實現:分別是滑鼠拖動和鍵盤控制。

滑鼠拖動

先設定乙個div方塊,設定它的寬、高、背景顏色,然後將它的位置設定為絕對定位(position:absolute)。

在滑鼠落在div上時,計算出滑鼠和div的起始距離。

在移動滑鼠的時候,給div設定css樣式,改變它的left和top值,用滑鼠現在的位置減去它們之間的起始距離就是div的位置。

在抬起滑鼠的時候清除繫結事件。

具體**

// 滑鼠移動div方塊跟著移動

$("div").mousedown(function(ev))

})$(document).mouseup(function())

ev.preventdefault();

// 阻止瀏覽器的預設行為

})

鍵盤控制

給上下左右鍵設定乙個開關,並將起始值設為false;

當按下鍵盤的時候,將它的開關設定為true,抬起鍵盤的時候將它的開關設定為false;

新增計時器,當開關為真時,改變div的left/top

具體**

var ol = false, ot = false, or = false, ob = false;

// 給上下左右鍵新增開關

$(document).on(

},// 當鍵盤抬起的時候,將開關的值設定為false

"keyup" : function(ev)}})

// 新增計時器,當開關為真時,改變div的left/top

setinterval(function(),30)

效果展示

emmm截圖只能看到有個方塊,我就不做gif**了,有興趣可以去試驗一下。

用jquery 做自己的tooltips

需求 希望滑鼠放到左邊的列表上,右邊動態出現相應的提示資訊。實現 左邊我使用table布局的,平均服務週期 第一步 您所選的專業導師起草寫作主題 思路 確定寫作中哪些是重點 次重點和非重點內容.第二步 用明確語言列出申請文書的的寫作大綱.讓您提筆就能輕鬆開始將自己的亮點賦予申請文書之中.樣式 too...

用程式模擬鍵盤和滑鼠鍵盤

在windows大行其道的今天,windows介面程式受到廣大使用者的歡迎。對這些程式的操作不外乎兩種,鍵盤輸入控制和滑鼠輸入控制。有時,對於繁雜的,或重複性的操作,我們能否通過編制程式來代替手工輸入,而用程式來模擬鍵盤及滑鼠的輸入呢?答案是肯定的。這主要是通過兩個api函式來實現的。下面以delp...

用c 做電子鍵盤 S神 蘇嘉億

最近閒在家裡,有事沒事就發篇博文 希望你能給點讚 好的,進入主題 如何用c 製作電子鍵盤呢?相信大家也和我一樣有著刨根問底的精神,和濃厚的好奇心想要跟我一 竟 很簡單,這是我們主要的乙個標頭檔案 include 它包含了我們的主角 beep 音高表 音符 對應音高 do 523 do 554 re ...