Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

For the third installment in the series, this time it’s About the Mouse turning into five Tricks (the Chrome plugin is ready-to-use)

  • The first issue of stick figure five Wu 5T5 directions: juejin.cn/post/702080…
  • The second phase of CSS painting small TV directions: juejin.cn/post/702080…

General effect :(entertainment, mainly for the browser plug-in curiosity, share your own ideas)

This is a dark night, I was feeling the hand in the report of the beautiful, suddenly the spirit, this week’s video haven’t started to think, after a pangwang after three sets were two packs of biscuits, a brainwave, suddenly curious about browser plug-in, then started itching (so if you see the content of the same b standing video name also have Bei, that is me!!!!!!! It’s me!)

The first step is to pull your husband’s picture out of the jumbled background. (There should be tools, but I think I found them and I’m done. Let me know in the comments

From the point of view of implementation, it is to judge whether the current mouse position is in the browser’s four edges, if so, change the graph, this piece is handed to JS

Part is the judgment of the current position, and this part extracts a function to say, what image should be displayed

The other part is calling this function and throttling to prevent stuttering from over-judging the position

Json file, we need to set the related name, avatar, code path, etc., in this file, we need to set the related name, avatar, code path etc. www.cnblogs.com/liuxianan/p…

Finally, attach the code and picture.

Link: pan.baidu.com/s/1I_FY5orz… Extraction code: Trigger r