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
Differences between FLOW CHART and UI FLOW
Many concepts in UI design may seem similar in wo...
JavaScript to implement search data display
This article shares the data display code for Jav...
A brief talk about React Router's history
If you want to understand React Router, you shoul...
Detailed explanation of MySQL combined query
Using UNION Most SQL queries consist of a single ...
OpenLayers realizes the method of aggregate display of point feature layers
Table of contents 1. Introduction 2. Aggregation ...
JavaScript canvas to load pictures
This article shares the specific code of JavaScri...
How to solve the problem of automatic package update in Debian system
I don't know when it started, but every time ...
HTML user registration page settings source code
Design the web page shown above: <!DOCTYPE htm...
Why should the number of rows in a single MySQL table not exceed 5 million?
Today, let’s discuss an interesting topic: How mu...
setup+ref+reactive implements vue3 responsiveness
Setup is used to write combined APIs. The interna...
Detailed deployment of docker+gitlab+gitlab-runner
environment Server: centos7 Client: window Deploy...
Mysql optimization Zabbix partition optimization
The biggest bottleneck of using zabbix is the d...
How to solve the problem that the software package does not exist when installing software in Linux
When the software package does not exist, it may ...
How to optimize MySQL query speed
In the previous chapters, we introduced how to ch...
Solution to nacos not being able to connect to mysql
reason The mysql version that nacos's pom dep...