How to achieve image jitter effect
Requirement: When you click on the picture, the picture will shake left and right, and it can also shake up and down.
The specific code is as follows:
(Recommended tutorial: CSS tutorial)
html:
<img src="./img/19.jpg" alt="" id="img1">
css:
img { position: absolute; top: 200px; left: 300px; }
js:
<script src="doMove.js"></script> <script> window.onload = function(){ var img1 = document.getElementById('img1'); img1.onclick = function(){ // 先获得img1的原来left值,在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字 var pos = parseInt(getStyle(img1,'left')); var arr = [];//20,-20,18,-18,16,-16,...存放抖动的频率 var timer = null;//开启定时器 var num = 0;//一般只要有数组,那么必定有数字跟着变化;数组的第0个,第1个... for(var i =20;i>0;i-=2){//左右抖动的幅度第一次为20px,然后减2 arr.push(i,-i); } arr.push(0); // alert(arr);//测试一下 // 有抖动的频率之后,要开启定时器让它进行抖动 clearInterval(timer);//开启定时器之前要先把定时器关闭,防止连续多次点击 timer = setInterval(function(){ img1.style.left = pos + arr[num] + 'px';//原来的位置pos,加上数组中每一个数字 num++; if(num === arr.length){//如果数字等于数组的长度(就是全部抖完了),关闭定时器 clearInterval(timer); } },50); } } </script>
Instructions:
1. We must first introduce our original encapsulated animation function doMove.js, and the getStyle() function is the function in this function;
2. parseInt() removes the 300px unit and leaves only the number 300;
3. To jitter up and down, just change left to top.
The above is the detailed content of How to achieve image jitter effect. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to achieve the playback of pictures like videos? Many times, we need to implement similar video player functions, but the playback content is a sequence of images. direct...

In React projects, we often encounter problems with the use of lifecycle functions, especially when it comes to page refresh, how to ensure that certain operations only...

Regarding the problem of inconsistent width of emsp spaces in HTML and Chinese characters in many web tutorials, it is mentioned that occupying the width of a Chinese character, but the actual situation is not...

How to achieve upward scrolling loading similar to WeChat chat records? When developing applications similar to WeChat chat records, a common question is how to...

How to realize the function of playing pictures like videos? Many times, we need to achieve similar video playback effects in the application, but the playback content is not...

Using react-transition-group in React to achieve confusion about closely following transition animations. In React projects, many developers will choose to use react-transition-group library to...

1.0.1 Preface This project (including code and comments) was recorded during my self-taught Rust. There may be inaccurate or unclear statements, please apologize. If you benefit from it, it's even better. 1.0.2 Why is RustRust reliable and efficient? Rust can replace C and C, with similar performance but higher security, and does not require frequent recompilation to check for errors like C and C. The main advantages include: memory security (preventing null pointers from dereferences, dangling pointers, and data contention). Thread-safe (make sure multi-threaded code is safe before execution). Avoid undefined behavior (e.g., array out of bounds, uninitialized variables, or access to freed memory). Rust provides modern language features such as generics

How to quickly build a front-end page in back-end development? As a backend developer with three or four years of experience, he has mastered the basic JavaScript, CSS and HTML...
