js图片抖动

基础概念

JavaScript 图片抖动是一种常见的网页动画效果，通过周期性地改变图片的位置，使其看起来像是在抖动。这种效果通常用于吸引用户的注意力或者增加页面的趣味性。

类型

简单抖动：图片在一定范围内左右或上下移动。
复杂抖动：结合多种方向和速度的变化，形成更复杂的运动轨迹。

应用场景

广告宣传：在广告区域使用抖动效果可以吸引用户点击。
游戏界面：在游戏中用于增强角色或道具的动态感。
社交媒体图标：使社交媒体图标更加生动，鼓励用户分享。

示例代码

以下是一个简单的JavaScript实现图片抖动的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Shake Effect</title>
<style>
  #shakyImage {
    width: 200px;
    height: 200px;
    transition: all 0.1s ease-in-out;
  }
</style>
</head>
<body>

<img id="shakyImage" src="path_to_your_image.jpg" alt="Shaky Image">

<script>
function shakeImage() {
  const img = document.getElementById('shakyImage');
  let x = 0;
  let y = 0;
  const shakeInterval = setInterval(() => {
    img.style.transform = `translate(${x}px, ${y}px)`;
    x = (x + (Math.random() - 0.5) * 10) % 10;
    y = (y + (Math.random() - 0.5) * 10) % 10;
    if (Math.random() > 0.9) clearInterval(shakeInterval);
  }, 100);
}

window.onload = shakeImage;
</script>

</body>
</html>

遇到的问题及解决方法

问题：图片抖动效果过于剧烈，影响用户体验。

原因：抖动的幅度和频率设置得过高。

解决方法：

调整 Math.random() - 0.5 中的系数，减小随机变化的范围。
增加 transition 的时间，使动画更加平滑。

img.style.transform = `translate(${x}px, ${y}px)`;
x = (x + (Math.random() - 0.5) * 5) % 5; // 减小抖动幅度
y = (y + (Math.random() - 0.5) * 5) % 5;

通过这种方式，可以有效地控制抖动的剧烈程度，从而优化用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

添加js抖动特效-鼠标悬停图片文字抖动

添加js抖动特效-鼠标悬停图片文字抖动作者：matrix 被围观: 2,203 次发布时间：2013-08-13 分类：Wordpress 兼容并蓄 | 无评论 » 这是一个创建于 3306...为WordPress添加js抖动特效效果不错！...在header.php添加代码： js/jquery-1.4.2.min.js"> js/jquery.doudong.js"> //抖动特效...第6行的.logo 和#mainr是设定的抖动标签和样式。 js下载：http://189.io/gLwunn 代码来自：http://www.17sucai.com/pins/505.html

5.1K3 0

【说站】给Emlog博客系统添加图片抖动的JS代码

2.找到我们模板的主要css文件，放到css的最后面即可，一般为style.css

3.8K1 0

emlog图片鼠标经过抖动效果，全网适用

纯CSS鼠标经过图片抖动效果，本博客主页面的博客主题就是。...把代码加到style.css(模板的主css里面)： /**图片抖动**/ img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation...) rotateY(10deg);} 100%{-moz-transform:perspective(400px) rotateY(0deg); opacity:1;}} 这边有的人和我说不喜欢全站的图片都这样抖动...那么我给出一个方案，给需要抖动的img前面加个div 给div加class属性=dimg 然后css代码如下： /**图片抖动**/ .dimg img:hover{-webkit-animation

9781 0

给emlog网站添加图片抖动效果

给emlog网站添加图片抖动效果，效果可以看本站把以下代码放入公用css文件中 img:hover { -webkit-animation:sucaijiayuan 1s .1s ease both

1.1K6 0

抖动代码

5201 0

js下载图片

image, 0, 0, image.width, image.height); const url = canvas.toDataURL('image/png'); // 得到图片的...const event = new MouseEvent('click'); // 创建一个单击事件 a.download = 'img.png' || 'photo'; // 设置图片名称

63.7K3 0

JS 图片压缩

前言说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，...文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？...压缩思路涉及到 JS 的图片压缩，我的想法是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下：获取上传 Input 中的图片对象 File 将图片转换成...，后续会有详细介绍转换后的图片生成对应的新图片，然后输出优缺点介绍不过 Canvas 压缩的方式也有着自己的优缺点：优点：实现简单，参数可以配置化，自定义图片的尺寸，指定区域裁剪等等。...上传存储图片如果需要对文件大小格式有要求的，可以统一压缩处理图片前台页面想要编辑图片，可以在 Canvas 处理图片的时候，加一些其他逻辑，例如添加文字，剪裁，拼图等等操作当然温馨提示：因部分接口有

25.8K2 1

操作系统抖动现象、网络抖动与延迟、函数抖动之防抖与节流

操作系统抖动我最开始接触到“抖动”这个词啊，除了抖腿，就是这个操作系统抖动了、话说过两天就要考操作系统了，顺带复习。...在操作系统中，抖动现象是指如果分配给进程的存储块数量小于进程所需要的最小值，进程的运行将很频繁地产生缺页中断，这种频率非常高的页面置换现象称为抖动。...背书，大佬勿喷··· 网络抖动说网络抖动可能还不是那么的，大众化。就是网卡啦，打游戏460啦。没那么夸张哈，抖动和延时，还是有那么点差别的。...抖动是基于延时产生的—具体而言，就是前后延时的值不一致。抖动是两个数据包延时值之间的差异。它通常会导致丢包和网络拥塞。虽然延时和抖动有很多共同点和关联，但是它们并不相同。...为了弥补抖动，在连接的接收端使用抖动缓冲区。抖动缓冲区收集并存储传入数据包，以便它可以确定如何以一致的间隔发送它们。静态抖动缓冲—其在系统的硬件中实现，并且通常由制造商配置。

1.3K1 0

文字抖动效果

文字抖动效果写在前面千万别说直到永远，因为你压根不知道永远有多远今天利物浦挺进了欧冠八强！...实现效果实现原理这个实现的方法和之前所写的文字闪烁效果方法相似通过给每个字添加一定的动画延时，使得字体产生抖动的感觉文字闪烁效果实现代码 <!

1.6K1 0

3.2.5 抖动

在页面置换过程中的一种最糟糕的情形是，刚刚置换的页面马上又要换入主存，刚刚换出的页面马上又换入主存，刚刚换入的页面马上就要换出主存，这种频繁的页面调度行为称为抖动，或颠簸。...频繁的发生缺页中断（抖动），其主要原因是某个进程频繁访问的页面数目高于可用的物理页帧数目。虚拟内存技术可以在内存中保留更多的进程以提高系统效率。

5101 0

图片上传预览js

DOCTYPE html> js.../jquery.js" type="text/javascript" charset="utf-8"> ... 图片

49K9 0

js上传图片预览

title> js

28.2K0 0

js拖拽上传图片

有时候，在开发中，需要遇到拖拽上传图片的需求，即从磁盘选中一张或多张图片，然后按着鼠标把图片拖动到页面上指定的区域，实现图片的上传。...1、后端上传图片的接口我是之前用vue写一个简单的后台系统的时候，用Java的SpringMVC+MyBatis的框架写了一个简单的后台管理的一些接口，刚好有一个上传用户头像的接口，该接口是把上传后的图片存储在另外一台...Tomcat下，这里就直接使用这个接口来上传图片。...ie=edge"> Document js...里面用的formData对象来上传图片的，该对象的作用是：　　1、用一些键值对来模拟一系列表单控件，即把form中所有表单元素的name与value组装成一个queryString；　　2、异步上传二进制文件

18.2K3 0

js --- 上传图片预览

DOCTYPE html> 图片上传预览功能 <input id='inp' type="file" name...= -1){ imgs.src= imgSrc; }else{ alert('错误的图片格式'); } // 正确显示 function geturl(file){

34.8K1 0

操作系统抖动现象、网络抖动与延迟、函数抖动之防抖与节流，串讲

操作系统抖动我最开始接触到“抖动”这个词啊，除了抖腿，就是这个操作系统抖动了、话说过两天就要考操作系统了，顺带复习。...在操作系统中，抖动现象是指如果分配给进程的存储块数量小于进程所需要的最小值，进程的运行将很频繁地产生缺页中断，这种频率非常高的页面置换现象称为抖动。...---- 背书，大佬勿喷··· ---- 网络抖动说网络抖动可能还不是那么的，大众化。就是网卡啦，打游戏460啦。没那么夸张哈，抖动和延时，还是有那么点差别的。...抖动是基于延时产生的—具体而言，就是前后延时的值不一致。抖动是两个数据包延时值之间的差异。它通常会导致丢包和网络拥塞。虽然延时和抖动有很多共同点和关联，但是它们并不相同。...为了弥补抖动，在连接的接收端使用抖动缓冲区。抖动缓冲区收集并存储传入数据包，以便它可以确定如何以一致的间隔发送它们。静态抖动缓冲—其在系统的硬件中实现，并且通常由制造商配置。

2.1K2 0

css抖动特效

抖动.gif <!

2.1K2 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...DOCTYPE> JS实现图片循环滚动 #roll {

19.8K3 0

js实现图片预览翻页

原文地址可以直接复制粘贴打开，图片是在线的，原理简单好懂！效果源码 js"> <meta...= document.getElementById("pre"); var next = document.getElementById("next"); //要切换图片就是要修改...但是返回的是数组，所以你得操作的是数组中的对象 var img = document.getElementsByTagName("img")[0]; //创建一个数组用来保存图片的路径

4553 0

JS图片预加载插件

在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。 ...1)概念：懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。...class="progress">0% js..."> js"> var imgs = ['http:...all: null //所有图片加载完毕后执行 }; //有序预加载 PreLoad.prototype.

16.8K5 0

图片预览放大js插件

分享一个非常简单的图片预览插件viewer 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css...viewer.css" rel="external nofollow" rel="external nofollow"> js..."> js"> js"></...//缩放等级（1倍) $image.viewer('zoomTo', 1); } }); // 初始化后获取Viewer.js

61.8K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js图片抖动

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐