JS implements click drop effect
|
js realizes the special effect of clicking and dropping. Let’s take a look at the effect picture first
Without further ado, let’s get started.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script>
window.onload = function () {
var str = '';
var len = 20;
var aDiv = document.getElementsByTagName('div');
var timer = null;
var num = 0;
for ( var i=0; i<len; i++ ) {
str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
}
document.body.innerHTML = str;
document.onclick = function () {
clearInterval( timer );
timer = setInterval( function () {
DM( aDiv[num], 'top', 23, 500 );
num++;
if ( num === len ) {
clearInterval( timer );
}
}, 100 );
};
};
</script>
</head>
<body>
</body>
</html>I quoted the encapsulation method here
function DM( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // step length
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target ) {
clearInterval( obj.timer );
/*
if ( endFn ) {
endFn();
}
*/
endFn && endFn();
}
}, 30);
}This is the end of this article about how to implement click-and-drop effects with JS. For more relevant js click-and-drop content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to implement Docker container self-start
>>: Solution to mysql failure to start due to insufficient disk space in ubuntu
Recommend
CSS to achieve fast and cool shaking animation effect
1. Introduction to Animate.css Animate.css is a r...
mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)
Regarding uninstalling the previously installed v...
How to set mysql5.7 encoding set to utf8mb4
I recently encountered a problem. The emoticons o...
Detailed explanation of the solution to npm ls errors caused by fsevents module under Linux
There is a project developed on Mac, and the pack...
Example code of vue icon selector
Source: http://www.ruoyi.vip/ import Vue from ...
Why MySQL does not recommend using null columns with default values
The answer you often hear is that using a NULL va...
Implementation of Docker Compose multi-container deployment
Table of contents 1. WordPress deployment 1. Prep...
User needs lead to marketing-oriented design
<br />For each of our topics, the team will ...
Pure CSS and Flutter realize breathing light effect respectively (example code)
Last time, a very studious fan asked if it was po...
Introduction to HTML for front-end developers
1 Introduction to HTML 1.1 First experience with ...
In-depth explanation of MySQL isolation level and locking mechanism
Table of contents Brief description: 1. Four char...
Various front-end printing methods of web: CSS controls web page printing style
CSS controls the printing style of web pages : Use...
10 minutes to thoroughly understand WeChat applet single page application routing
Single page application characteristics "Ass...
Graphic tutorial on installing Mac system in virtual machine under win10
1. Download the virtual machine version 15.5.1 I ...
IE6 distortion problem
question: <input type="hidden" name=...