开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 震动效果

在JavaScript中实现震动效果，通常是通过CSS的transform属性结合JavaScript的定时器（如setInterval或requestAnimationFrame）来完成的。以下是一个基础的概念解释和相关代码示例：

基础概念

CSS Transform：CSS的transform属性允许你对元素进行旋转、缩放、移动或倾斜等变换。
JavaScript 定时器：setInterval或requestAnimationFrame可以用来定期执行代码，从而创建动画效果。

优势

性能良好：使用CSS3的transform属性进行动画处理，可以利用GPU加速，提高性能。
易于实现：通过简单的JavaScript和CSS代码即可实现。

类型

震动效果可以根据需求有不同的实现方式，比如：

水平震动
垂直震动
双向震动

应用场景

震动效果常用于用户交互反馈，例如：

表单验证失败时的提示
按钮点击后的视觉反馈
游戏中的碰撞效果

示例代码

以下是一个简单的双向震动效果示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>震动效果示例</title>
<style>
  .shake {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
  }

  @keyframes shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5px, 0); }
    50% { transform: translate(0, 0); }
    75% { transform: translate(5px, 0); }
    100% { transform: translate(0, 0); }
  }
</style>
</head>
<body>

<button onclick="this.classList.toggle('shake')">点击我震动</button>

</body>
</html>

在这个示例中，当按钮被点击时，会切换shake类，从而触发CSS动画效果，使按钮在水平方向上震动。

解决问题的方法

如果在实现震动效果时遇到问题，可以尝试以下方法：

检查CSS选择器：确保CSS选择器正确，能够选中需要应用震动效果的元素。
调整动画参数：根据需要调整动画的持续时间、迭代次数等参数。
兼容性检查：确保使用的CSS属性和JavaScript方法在目标浏览器中兼容。
性能优化：如果发现震动效果影响页面性能，可以尝试减少动画的复杂性或使用更高效的动画方法。

通过调整上述代码和参数，你可以实现不同强度和持续时间的震动效果，以满足不同的应用场景需求。

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

有帮助

没帮助

相关·内容

网站集成打字震动特效JS代码改进版

简单的改进： 1、移动端关闭震动，移动端震动会显得很卡； 2、添加震动开关，方便不喜欢的朋友进行关闭，采用 Cookie 记忆同一个浏览器点击关闭一次即可。...Ps：没什么技术含量，略懂 JS 语法的朋友完全可以自己继续发挥。...地址：https://www.domain.com/wp-content/themes/begin/js/apm-min.js 能够在浏览器正常访问即可。...-- 这里的js改为第1步中的实际JS地址 --> js/apm-min.js">关闭震动 Ps：每个人网站风格不一样，这个按钮样式就不给 CSS 代码了，自行 DIY 修改吧。效果预览：在本页留言即可看到效果。

2.9K7 0

【设备】震动(Vibration)

概述设备方向(Orientation) API 是通过vibrate()方法来实现的,通过该方法, 当有事件通知时,WEB应用程序可以让设备震动以达到提醒用户的目的。...震动一次为了让设备震动一次,我们调用vibrate()方法,并传递一个指示震动持续时间的数值(毫秒单位)。...// 震动一次1分钟 navigator.vibrate(60*1000); 震动多次为了让设备震动多次, 我们将一个整数数组传递给振动方法,指示震动的次数,各次的持续时间以及停顿时间: / 震动三次...// 前两次震动为1秒钟 // 最后一次震动为2秒钟 // 停顿半秒钟 navigator.vibrate([1000, 500, 1000, 500, 2000]);

9273 0

JS动画效果

JavaScript 动画框架框架封装 ---- 相信大家在很多门户网站上都可以看到动画的交互效果，通过这些动画生动地体现了我们在网页上的交互效果，现在我们就来学习一下这些动画效果的分解动作吧。...动画的实现思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity....li> 四.链式动画首先把上面的简单运动框架抽取出来然后加上透明度的变化，放进一个人通用的ＪＳ文件里movement.js...filter: alpha(opacity:30); opacity: 0.3; } js...JSON的格式：｛键：值，键：值｝完善后的运动框架js：movement.js function getStyle(obj,attr) { if(obj.currentStyle){

20.8K8 1

js动画效果_js动画函数

一、setTimeout VS. requestAnimationFrame 传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作，但这种方式在使用中存在一些问题...另外，各个显示器的刷新频率不同，也使得一套代码无法自适应不同频率，难以对动画效果最优化。...就是10ms；如果是16.7ms，则interval自动是16.7ms 浏览器优化动画绘制浏览器可以合并requestAnimationFrame的动画操作、CSS动画、CSS变换等各种动画效果到一次渲染周期中完成

30.8K3 0

javascript动画效果_js动画效果animate

此案例实现的是侧边栏的滑入与滑出，主要用定时器来实现物体滑动时速度的控制，从而实现滑入滑出效果，下面是效果图：下面是实现的js代码： window.onload=function()

16.7K2 0

JS 实现全屏效果

http://mpvideo.qpic.cn/0b78biabsaaadaacplu7bvqfacwddefaagia.f10002.mp4? 点击按钮触发 r...

17K2 0

Js 实现 marquee 效果

使用RequestAnimationFrame，核心部分就是利用transformX实现位移 Js 逻辑写的比较挫，还要想想怎么改进，或者有更好的思路。

8.1K2 0

Android震动器Vibrator调用

Android震动器Vibrator调用 1.首先添加权限 2.获得Vibrator

3.8K1 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生JS...实现分页效果 a { margin: 5px; }

12.4K1 0

appinventor开发震动按摩APP

为两个标签分别设置“震动间隔”和“震动时长”内容，红色字体，滚动条分别设置最大值和最小值，单位是毫秒。编程编程逻辑这个软件不是很复杂，所以编程也很简单。...首先思考下计时器间隔，震动间隔事件和震动时长三者的关系。举个例子：如果我们想每隔1秒震动2秒，那么计时器间隔就是3秒，因为在震动的时候计时器也是工作的。...所以编程：当点击“开始震动”按钮时，让计时器工作，发出提示文字，设置计时器间隔时间=“震动间隔”+“震动时长”；然后当计时器达到间隔时间时，设置振动器时长为滑块位置对应时间，然后让音效播放器发声；...成品APP下载：[震动机.apk]3 说明：此产品诞生原由，主要是削减无聊，界面制作思路，以及震动频率的要求都是来自群内基友。

7252 0

js放大镜效果

效果图 html <!...left: 0; top: 0; /* 鼠标箭头样式 */ cursor: move; display: none; } js

1051 0

js _页面开关灯效果

DOCTYPE html> 开关灯效果

10.1K3 1

Android笔记：震动实现

Android震动可以通过Vibrator类实现。...--震动--> 2、编写工具；在Activity中获取Vibrator实例，并调用vibrate方法来触发震动： public class VibratorUtil { /** *...：自定义震动模式。...数组中数字的含义依次是[静止时长，震动时长，静止时长，震动时长。。。]...时长的单位是毫秒 * boolean isRepeat ：是否反复震动，如果是true，反复震动，如果是false，只震动一次 */ public static void

4805 0

mermaid.js 效果相册

mermaid 是一款 javascript 库，能够轻而易举地通过文本代码绘图。

2943 1

JS实现图片弹窗效果

近期正在鼓捣个人网站，想实现进入网站自动弹出二维码的效果，类似下面这样： ?...中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！...利用jquery.popup.js可以实现图中炫酷的动画效果, 支持animate.css。...">x js/jquery-1.11.0.min.js" type="text/javascript"> js/jquery.popup.js"> $(function () { $('.btn1').on('click', function

23.8K3 0

js 遮罩层 loading 效果

LayerShow(text)，text为参数，可以写入想要写入的提示语 //本方法在调用时会自动生成一个添加到body的div，并且会在调用隐藏遮罩层 LayerHide()时删除div //封装遮罩层div显示效果

9.2K3 1

js 做返回顶部效果

window.onload 窗口加载完成事件；如果js代码写在body标签之前，则所有的js都要写在window.onload的事件中；即等待窗口加载完成之后再执行！...定时器 setInterval 做返回顶部的动画效果 6....清除定时器实现步骤：注册窗口滚动事件滚动离顶部的距离大于300时，显示ICON 注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0 用定时器做返回顶部的滚动效果...device-width, initial-scale=1.0"> 返回顶部效果...none"> 效果

10.4K3 0

原生JS实现魔方效果

给大家分享一个用原生JS实现的魔方效果，效果如下：以下是代码实现：原生JS实现魔方效果 <style type=

7.3K1 0

圆盘时钟效果原生JS

圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟，设计的同款时钟效果实现效果 ?...背景采用的是一个炫彩流光的效果，利用了CSS3新增的动画效果这部分的炫彩流光效果在之前的博客中有详细讲到炫彩流光效果指针时钟通过定位将三根针重叠在一起，下端对齐都摆在原点，通过transfrom-origin...+ (rotateM / 60)) + 'deg' + ')' 就像这样把分针旋转了多少反馈给时针，60分钟一个小时，所以是除以60 旋转时钟这里采用的是clip-path属性采取另一半的圆，圆环的效果采用的是大小圆的思路...226,20,233),rgb(41, 41, 41)); clip-path: inset( 0 50% 0 0 ); transform-origin: center center; } JS...，圆环的实现，也只是通过了简单的裁剪，想不到实现圆弧的效果代码有点长，如需完整代码，可以留言或私信

11.7K2 0

OpenHarmonyHarmonyOS震动模块的使用

@ohos.vibrator (振动) 作者：坚果，公众号：”大前端之旅“，哔哩哔哩，OpenHarmony布道师，OpenHarmony校源行开源大使，51C...

6422 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭