監控滑鼠的位置點選實現圓形擴散動畫

2022-05-21 09:16:37 字數 1611 閱讀 1611

首先看效果圖如下:

一、要實現如下的效果我們先分析都要什麼?

1:首先我們要先實現這個動畫擴散效果。

2:然後當滑鼠點選該標籤時,你需要在他的下面新增乙個標籤並把這個動畫給這個新增標籤。

3:其次我們要監控滑鼠的位置。

4:在其次找到被點選的標籤的位置與滑鼠點選位置相減就是這個做動畫的標籤的初始位置。

5:讓這個標籤到相應位置之後再做動畫。

二、實現效果

1:頁面增加乙個div標籤改變他的樣式

2:實現圓形擴散效果

cs3新增了酷炫的動畫,就拿animation來說它可以讓乙個元素旋轉、放大、平移....,而我們這裡要用到的就是放大(縮小)scale(x,y),他有兩個引數x和y,而x是在x軸放大(縮小)的倍數,y是在y軸上放大(縮小)的倍數。當你只有乙個引數時預設就是x y放大(縮小)同樣的倍數**如下。

.sp

@keyframes anima

to}

你只需要在這個div上繫結事件每點選一次新增加乙個span標籤把這個類給span即可(這裡注意每次新增span標籤之前要把上次的span標籤移除)。

3:獲得滑鼠點選的位置。

通過jquery給我們提供的event.pagex,event.pagey來獲得當前滑鼠點選的位置。

我們在這個div上繫結事件來獲得滑鼠點選的位置**如下:

$('.bg').bind('mousedown',function(e));
輸出結果如下:

可以看出我們已經獲得了滑鼠點選的位置。

4:獲得當前標籤的位置

我們還要獲得這個div相對於視窗的偏移位置,然後與滑鼠點選位置相減獲得我們做動畫的span標籤的top和left值。

jquery為我們提供了offset方法這個方法可以獲得當前元素相對於視窗的偏移位置,這個位置是相對於匹配元素的左上角的位置用法如下。

$('.bg').click(function())
5:實現最終效果

這裡我們已經獲得了兩個位置,他們相減之後就是做動畫的span的top和left。我把它封裝到乙個move函式裡面你只需要給他傳遞乙個id就能讓相應的標籤有這個動畫效果。**如下:

function spread(id));

$(id).click(function())})}

spread('.bg');

好了效果已經實現了有沒有很酷炫!0.0

監控鍵盤滑鼠的動作,實現離位監控

在網上找了很多hook鍵盤滑鼠,實現離位監控,都不完善,這裡根據的 修改後做了介面呼叫簡單。由於本人對dll不熟悉,本想直接把接收資訊的窗體也做到dll裡的,一是不熟悉,二是時間緊,就沒搞了。下來進入正題 把監控鍵盤滑鼠動作的過程,封裝成了 乙個form窗體 frmkbmhook.pas dfm 在...

angularjs獲取當前滑鼠的位置

在angularjs專案中,canvas畫圖經常會要求獲取使用者當前滑鼠的座標位置,而且因為不同瀏覽器獲取資料的方式不同,避免每次都去寫實現該功能的 因此把該功能寫成乙個函式,以後直接呼叫就行了,封裝函式如下 獲取當前dom元素 function getcrossbrowserelement mou...

C winform 獲取滑鼠點選位置

說明 該篇隨筆的 內容並非出自本人,是在其他 搜尋的,出處已經不記得了,本次隨筆只為記錄,目的幫助自己,幫助他人。實現的原理也不做多的贅述,直接上 第乙個類是需要用到的windows api public class win32api structlayout layoutkind.sequenti...