js窗口震動(dòng)小程序分享
前言:窗口震動(dòng)的應(yīng)用是很常見的,比如最常用的聊天軟件qq,就有一個(gè)窗口抖動(dòng),還有在填表單時(shí)的出錯(cuò)提醒,所以自己也寫了個(gè)很簡(jiǎn)單的示例,以下是具體的代碼
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>窗口震動(dòng)</title> </head> <body> <div style="background:#ff0; width:200px; height:200px; margin-top:200px; margin-left:600px" id="win"></div> <script type="text/javascript"> var loop = 0; //統(tǒng)計(jì)震動(dòng)次數(shù) var timer; //定時(shí)器引用 var offx; //水平偏移量 var offy; //垂直偏移量 var dir; //控制震動(dòng)方向 timer = setInterval(function(){ var win = document.getElementById("win"); if (loop > 100) { clearInterval(timer); //震動(dòng)次數(shù)超過(guò)100就停止定時(shí)器 } dir = Math.random()*10 > 5 ? 1 : -1; //獲得震動(dòng)方向 offx = Math.random()*20*dir; offy = Math.random()*20*dir; win.style.marginTop = 200+offx+"px"; win.style.marginLeft = 600+offy+"px"; loop++; },10) //每隔10毫秒震動(dòng)一次 </script> </body> </html>
在代碼中主要就是利用隨機(jī)數(shù)來(lái)控制抖動(dòng)的方向和范圍,還有用setInterval函數(shù)來(lái)設(shè)置抖動(dòng)的頻率,以及l(fā)oop變量設(shè)置一次抖動(dòng)的次數(shù)。自己可以根據(jù)實(shí)際需求來(lái)設(shè)置抖動(dòng)的頻率,范圍,和次數(shù)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jsp圖片效果大全(圖像震動(dòng)效果、閃爍效果、自動(dòng)切換圖像)
- javascript實(shí)現(xiàn)手機(jī)震動(dòng)API代碼
- js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法
- js 鼠標(biāo)放圖片上抖動(dòng)效果
- javascript實(shí)現(xiàn)的仿騰訊QQ窗口抖動(dòng)效果代碼
- js 窗口抖動(dòng)示例
- js模擬QQ窗口的抖動(dòng)效果
- js實(shí)現(xiàn)鼠標(biāo)觸發(fā)圖片抖動(dòng)效果的方法
- JS實(shí)現(xiàn)仿QQ聊天窗口抖動(dòng)特效
- jquery.messager.js插件導(dǎo)致頁(yè)面抖動(dòng)的解決方法
相關(guān)文章
JS promise 的回調(diào)和 setTimeout 的回調(diào)到底誰(shuí)先執(zhí)行
本文主要介紹了JS promise 的回調(diào)和 setTimeout 的回調(diào)到底誰(shuí)先執(zhí)行,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Javascript showModalDialog兩個(gè)窗體之間傳值
前一篇文章Javascript怎么在兩個(gè)窗體之間傳值中講到了如何利用window.open()方法打開新窗體,并在兩個(gè)窗體之間傳值的方法。2009-09-09js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實(shí)例分析
這篇文章主要介紹了js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法,結(jié)合具體實(shí)例形式分析了javascript構(gòu)造函數(shù)constructor概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05js刪除數(shù)組中某幾項(xiàng)的方法總結(jié)
在本篇文章里小編給大家分享了關(guān)于js刪除數(shù)組中某一項(xiàng)或幾項(xiàng)的幾種方法內(nèi)容,有需要的朋友們學(xué)習(xí)下。2019-01-01微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問(wèn)題總結(jié)
最近公司有個(gè)需求,第一次遇到,把原生的微信小程序代碼轉(zhuǎn)換為uni-app項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07教你JavaScript利用charAt()統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符和次數(shù)
這篇文章主要介紹了JavaScript利用charAt()統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符和次數(shù)的操作方法,本文以判斷一個(gè)字符串'aabcdobdackoppz'中出現(xiàn)次數(shù)最多的字符,并統(tǒng)計(jì)其次數(shù)為例,通過(guò)實(shí)例代碼給大家詳細(xì)介紹,需要的朋友參考下吧2021-08-08詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問(wèn)題
這篇文章主要介紹了詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07