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
WeChat Mini Program implements the likes service
This article shares the specific code for the WeC...
js implements a simple countdown
This article example shares the specific code of ...
Vue Basics Listener Detailed Explanation
Table of contents What is a listener in vue Usage...
Mysql implements null value first/last method example
Preface We already know that MySQL uses the SQL S...
Introduction to the role of HTML doctype
Document mode has the following two functions: 1. ...
The most common mistakes in HTML tag writing
We better start paying attention, because HTML Po...
Use of Docker image storage overlayfs
1. Overview The image in Docker is designed in la...
Perfect solution for vertical centering of form elements
Copy code The code is as follows: <!DOCTYPE ht...
Detailed explanation of several commands in Linux to obtain detailed hardware information
In Linux systems, especially server systems, it i...
vue+element custom query component
This article mainly introduces the Vue project. O...
A detailed introduction to Linux file permissions
The excellence of Linux lies in its multi-user, m...
Detailed explanation of Docker usage under CentOS8
1. Installation of Docker under CentOS8 curl http...
How to compile and install PHP and Nginx in Ubuntu environment
This article describes how to compile and install...
MySQL 8.0.15 installation graphic tutorial and database basics
MySQL software installation and database basics a...
Detailed discussion of memory and variable storage in JS
Table of contents Preface JS Magic Number Storing...