Tag：mouse
-
Time：2021-12-27
motivation At a company meeting, I make complaints about the effect of a mouse track in a product. You can see that its implementation is tomousemoveThe coordinates when the event is triggered are connected by rectangles with different lengths and widths, so there is an obvious “fracture” at the connection, the whole track is not […]
-
Time：2021-12-17
1. The core API of scraping (eraser) effect ctx.globalCompositeOperation = type; Sets the type of compositing operation to apply when drawing a new shape.The type we need to use here isdestination-outDetails of this property:MDN document 2. Basic version scratch function Canvs overlay on picture <style> body { margin: 0; } img { width: 400px; height: 300px; left: 200px; position: absolute; z-index: -1; } […]
-
Time：2021-12-17
WelcomeMy columnView a series of articles. Previously, I only knew that the click event would start only when clicking on the elements in the browser. Other events are the same, requiring manual mouse operation. Later, with the deepening of learning, I learned that JS can write functions to control the execution of events, so it […]
-
Time：2021-12-14
Problem phenomenon description Primary treatment (useless) window.addEventListener(“resize”, () => { setTimeout(() => { //Code block to execute },500) }); Just set a setTimeout in it. As a result, the frequency of image flashing is reduced, but it still flashes Conventional treatment (anti shake) [1.] write a debounce anti shake function first debounce(fn, delay) { let […]
-
Time：2021-12-5
JQuery rotation chart <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .carousel-box{ width: 670px; height: 240px; position: relative; margin: 0 auto; } .carousel-box img{ width: 670px; height: 240px; position: absolute; top: 0px; left: 0px; } .carousel-box ul{ position: absolute; left: 50%; margin-left: -78px; bottom: […]
-
Time：2021-11-30
The general measurement function is mainly reflected in two aspects: one is to measure distance, the other is to measure area. Area measurement is to calculate the actual area size through the transformation of geographical coordinate system according to the range drawn by the mouse. Distance measurement is to calculate the actual distance between two […]
-
Time：2021-11-25
Recently, many netizens have encountered that the right mouse button can’t find the text document in the new menu bar, that is, the right mouse button can’t create a notepad. This situation is mostly related to our registry. Today, Xiaobian brings you the solution that the right mouse button can’t find the text document and […]
-
Time：2021-11-20
In the digital twin visualization scene, we may encounter this problem, that is, we need to measure the distance between different targets in the digital twin visualization scene. Through this measurement, we can clearly know the location of each target in the visualization scene and the distance between each target, so as to make reasonable […]
-
Time：2021-11-18
The function of this cmder is to enable the CMD of your window system to use commands like Linux, VIM, etc,Look at this big brother’s tutorial, it’s easy After installation, you can right-click anywhere to see this Then we can use it like Linux. Those who are interested can play it PS: […]
-
Time：2021-11-17
Effect drawing first: We first need to create aindex.htmlFile with some simplehtmlandcsscode: <!DOCTYPE html> <html> <head> <title>HTML5 Crop Image</title> </head> <style type=”text/css”> body{text-align:center;} #label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;} #get_image{position:absolute;} #edit_pic{position:absolute;display:none;background:#000;} #cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;} #show_edit{margin: 0 auto;display:inline-block;} #show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; } </style> <body> <input type=”file” name=”file” id=”post_file”> <button id=”save_button”>SAVE</button> <div id=”label”> <canvas id=”get_image”></canvas> <p> <canvas […]
-
Time：2021-11-15
Transferred from: Ruan Yifeng July 26, 2011 http://www.ruanyifeng.com/blo… jQueryIt is currently the most widely used JavaScript function library. According to statistics, 46% of the top 1 million websites in the world use jQuery, far more than other libraries. Microsoft even takes jQuery as their official library. It is necessary for web developers to learn jQuery. […]
-
Time：2021-11-13
ngClick Applicable labels: allTrigger condition: Click #html <div ng-controller=”LearnCtrl”> <div ng-click=”click()”>click me</div> <button ng-click=”click()”>click me</button> </div> #script angular.module(‘learnModule’, []) .controller(‘LearnCtrl’, function ($scope) { $scope.click = function () { alert(‘click’); } }); ngDblclick Applicable labels: allTrigger condition: double click #html <div ng-controller=”LearnCtrl”> <div ng-dblclick=”dblclick()”>click me</div> <button ng-dblclick=”dblclick()”>click me</button> </div> #script angular.module(‘learnModule’, []) .controller(‘LearnCtrl’, function ($scope) { […]
