图片左右抖动、上下抖动

最新推荐文章于 2022-10-12 15:30:12 发布
最新推荐文章于 2022-10-12 15:30:12 发布
阅读量7.7k 收藏 6
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erdouzhang/article/details/76973115
版权
本文介绍如何实现图片点击后进行左右和上下抖动的动画效果。通过引入doMove.js并调用其中的函数，结合HTML、CSS和JS代码，可以实现图片的抖动动画。关键点包括：去除单位转换数字、调整CSS属性（left或top）以改变抖动方向。
摘要由CSDN通过智能技术生成

这里写图片描述 这里写图片描述

点击图片，图片会左右抖动；也可以上下抖动：

下面是左右抖动（原js代码没有进行封装）：

html：

<img src="./img/19.jpg" alt="" id="img1">
最低0.47元/天 解锁文章
erdouzhang
关注
专栏目录
jQuery图片抖动滑块切换特效代码
03-20
"jQuery图片抖动滑块切换特效"就是一种这样的设计手法，它利用jQuery库和CSS3的技术，使得图片在切换时产生上下抖动的视觉效果，为用户带来独特的互动体验。 **jQuery基础** jQuery是一个轻量级的JavaScript库，它...
el-upload 上传抖动问题、隐藏回显动画
记录常见的问题以及解决办法
08-11 1692
el-upload 上传抖动问题
html图片左右晃动,微信小程序图片左右摆动效果详解
weixin_42131728的博客
06-05 1867
先看效果，实现一个图片左右摇动，在一般的H5宣传页，商家活动页面我们会看到这样的动画，小程序的动画效果不同于css3动画效果，是通过js来完成的，其实步骤很简单，首先创建动画实例，再调用实例来描述动画，最后导出即可。先看效果如下：简单的参考代码：wxml:css：.img {width: 120rpx;height: 120rpx;margin:300rpx;}jsPage({data: {ani...
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
weixin_31597759的博客
05-31 1072
本文实例讲述了js实现鼠标触发图片抖动效果的方法。分享给大家供大家参考。具体实现方法如下：鼠标触发图片抖动效果.shakeimage{position:relative}//configure shake degree (where larger # equals greater shake)var rector=3///////DONE EDITTING///////////var stopit...
antd Upload组件使用，出现闪动问题
qq_37766810的博客
12-22 2581
antd upload 闪动
html震动效果,JS实现简单抖动效果
weixin_30920223的博客
06-04 804
废话不多说了，直接给大家贴代码了，具体代码如下所示：Title#div1 {width: 100px;height: 100px;position: absolute;left: 400px;top: 200px;background: red;}var div1 = document.querySelector('#div1');document.onclick = function () {/...
Android抖动动画效果（上下抖和以角旋转）
04-29
"Android抖动动画效果（上下抖和以角旋转）"这个主题主要关注如何实现物体在屏幕上进行上下抖动和以角度旋转这两种动态效果。抖动动画通常用于错误提示、输入验证等场景，而角旋转则常见于按钮点击、加载图标等交互...
jQuery图片抖动滑块切换.zip
07-04
这个特效是利用JavaScript库jQuery以及CSS3技术来实现的，它为用户提供了一种独特而引人注目的方式来展示一组图片，通过图片的上下抖动效果，增加用户的视觉体验。 首先，我们来理解一下jQuery。jQuery是一个轻量级...
OpenGL实现抖动技术，场景很炫哦
11-09
在这个案例中，抖动被应用到图像的移动上，使得图片不是简单地平滑移动，而是按照正弦波的规律上下或左右摇摆，增加了视觉的动感和趣味性。 首先，理解正弦波的概念是至关重要的。正弦波是一种周期性连续函数，通常...
QQ窗口抖动JS效果 很好用
03-17
- 根据`b`的值改变`top`和`left`其中之一的值，实现图像的上下左右抖动效果。 - 当`b`超过15时，清除计时器并重置`b`为0，以防止无限循环导致的性能问题。 #### 三、工作原理 1. **触发机制**：当用户点击页面上...
HTML图片抖动效果
12-15
HTML页面效果 鼠标移入，图片抖动效果。
图片抖动软件（神奇软件）
12-22
可以使稀有价值摇起来，使静态的图片动起来，像布丁之类的
JS模仿window屏保实现图片上下左右移动
一个减肥的小胖子
01-30 764
HTML &lt;div class="upgradeContainer"&gt; &lt;div class="upgradeImgContainer"&gt; &lt;img src="~/Content/Base/imgs/upgrade.png" alt="" /&gt; &lt;span class="dele
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 984
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Css实现上下无限跳动动画
明知山
08-23 5432
来一张效果图 图中的三角形会一直上下跳动 .arrow { position: absolute; bottom: 15%; left: 50%; transform: translate(-50%, -50%); text-align: center; ...
css实现 元素/图片上下跳动 左右跳动 css动画
小小前端攻城狮
09-30 4989
css实现 元素上下跳动 左右跳动
JS实现鼠标指向图片抖动代码
weixin_34329187的博客
12-23 184
代码简介： 一款比较平滑的图片抖动特效，鼠标放到图片上触发JS函数，记得QQ聊天有一个窗口抖动效果，和这个类似，很可爱。 代码内容： View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
图像随机抖动算法
Reaearcher-Du
10-12 7835
没有用的颜色随机抖动
GL_DITHER 抖动算法
热门推荐
GrimRaider的专栏
04-11 1万+
对于可用颜色较少的系统，可以以牺牲分辨率为代价，通过颜色值的抖动来增加可用颜色数量。抖动操作是和硬件相关的，OpenGL允许程序员所做的操作就只有打开或关闭抖动操作。实际上，若机器的分辨率已经相当高，激活抖动操作根本就没有任何意义。要激活或取消抖动，可以用glEnable(GL_DITHER)和glDisable(GL_DITHER)函数。默认情况下，抖动是激活的。 抖动算法 应朋
uniapp 点击事件触发图片左右抖动
最新发布
07-10
要实现在UniApp中点击事件触发图片左右抖动效果，你可以使用CSS的动画和Vue的事件绑定来实现。 首先，在页面的样式文件中定义一个动画效果，比如`shake`： ```css @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } 100% { transform: translateX(0); } } ``` 然后，在模板文件中，使用`@click`事件绑定一个方法，并给图片添加一个class绑定该方法： ```html <template> <view> <image @click="shakeImage" :class="{ 'shake': isShaking }" src="your-image-src"></image> </view> </template> ``` 接下来，在Vue组件的script中，定义`isShaking`变量和`shakeImage`方法： ```javascript <script> export default { data() { return { isShaking: false }; }, methods: { shakeImage() { this.isShaking = true; setTimeout(() => { this.isShaking = false; }, 1000); // 设置一个适当的时间，让图片停止抖动 } } }; </script> ``` 最后，通过控制`isShaking`变量的值，切换图片的class，从而触发图片的左右抖动效果。 注意，需要根据实际情况修改代码中的图片路径和动画效果细节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值