简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Simple sample code sharing for JS to achieve dithering effect

黄舟
Release： 2017-06-01 09:20:40
Original
1397 people have browsed it

This article ends for everyone to achieve the dithering effect through js, which is very good and has reference value. Friends who are interested can refer to it

No more nonsense, just go directly I’ve posted the code for everyone. The specific code is as follows: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 200px;
background: red;
}
</style>
</head>
<body>
<p id="p1"></p>
<script>
var p1 = document.querySelector(&#39;#p1&#39;);
document.onclick = function () {
/*
* 抖动：
* 1. 每次改变一下元素的位置
* 按照一个中心点进行偏移，假设中心点left原始是400，那么每次就以left：400为中心做位置的移动
* 380 -> 420
* */
// p1.style.left = &#39;380px&#39;;
// p1.style.left = &#39;420px&#39;;
var a = true;
setInterval(function() {
/*
* 根据a的值，做不同的设置
* */
p1.style.left = (a ? 380 : 420) + &#39;px&#39;;
a = !a;
}, 30);
}
</script>
</body>
</html>
Copy after login

The above is the detailed content of Simple sample code sharing for JS to achieve dithering effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
JS，抖动效果
source：php.cn
Previous article：Example code sharing of how JS randomly generates a verification code Next article：Detailed explanation of express-session configuration items in node.js
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Why does omitting 0ms sleep break my css transitions? I'm trying to implement a FLIP animation to see if I understand it correctly. In this code...
From 2024-04-06 16:29:50
0
2
490
How can I make text turn into a new element (like a divider) when clicked? I'm trying to find a way to make certain text on the page turn into separators/new element...
From 2024-04-04 11:21:03
0
1
3580
The question is still the same, but the title is rewritten as follows: My Javascript random function fails to generate valid responses I'm making a simple random number generator game using JS and HTML. In this game you can s...
From 2024-04-03 22:03:14
0
1
275
Button activation causes hover effect to malfunction I've been trying to learn the basics of web development (HTML, CSS, and JS), so I've been ...
From 2024-04-01 21:51:26
0
1
396
How to allow users to upload or change images on one page and display them on another page? How to let users upload pictures on one page and then display them on another page? The us...
From 2024-04-01 18:33:31
0
1
332
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！