一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - JS實現簡單抖動效果

JS實現簡單抖動效果

2022-01-12 15:27catEatBird js教程

這篇文章給大家結束了通過js實現抖動效果,非常不錯,具有參考借鑒價值,感興趣的朋友參考下吧

廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
var div1 = document.querySelector('#div1');
document.onclick = function () {
/*
* 抖動:
* 1. 每次改變一下元素的位置
* 按照一個中心點進行偏移,假設中心點left原始是400,那么每次就以left:400為中心做位置的移動
* 380 -> 420
* */
// div1.style.left = '380px';
// div1.style.left = '420px';
var a = true;
setInterval(function() {
/*
* 根據a的值,做不同的設置
* */
div1.style.left = (a ? 380 : 420) + 'px';
a = !a;
}, 30);
}
</script>
</body>
</html>

好了,代碼到此結束,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的,在此也非常感謝大家對服務器之家網站的支持!

原文鏈接:http://www.cnblogs.com/catEatBird/archive/2017/05/31/6926453.html

延伸 · 閱讀

精彩推薦
  • js教程基于JavaScript實現輪播圖效果

    基于JavaScript實現輪播圖效果

    這篇文章主要為大家詳細介紹了基于JavaScript實現輪播圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    努力學習中.....5562021-12-24
  • js教程js簡單粗暴的發布訂閱示例代碼

    js簡單粗暴的發布訂閱示例代碼

    這篇文章主要給大家介紹了js簡單粗暴的發布訂閱的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要...

    威威威威vvvv6342022-01-06
  • js教程Javascript實現漢字和拼音互轉的終極方案

    Javascript實現漢字和拼音互轉的終極方案

    網上關于JS實現漢字和拼音互轉的文章很多,但是比較雜亂,有的不支持多音字、不支持聲調或者字典文件太大,無法根據實際需要滿足需求。這篇文章給...

    我是小茗同學10232021-12-15
  • js教程javascript實現拼圖游戲

    javascript實現拼圖游戲

    這篇文章主要為大家詳細介紹了javascript實現拼圖游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    過客塵煙4872022-01-12
  • js教程原生JS實現京東查看商品點擊放大

    原生JS實現京東查看商品點擊放大

    這篇文章主要為大家詳細介紹了原生JS實現京東查看商品點擊放大,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    A.香辣雞腿堡7202021-12-15
  • js教程JavaScript代碼實現簡單計算器

    JavaScript代碼實現簡單計算器

    這篇文章主要為大家詳細介紹了JavaScript代碼實現簡單計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    小蟲蟲~4072021-12-21
  • js教程在HTML中使用JavaScript的兩種方法

    在HTML中使用JavaScript的兩種方法

    這篇文章主要介紹了在HTML中使用JavaScript的兩種方法,幫助大家更好的理解和制作網頁,感興趣的朋友可以了解下...

    itbsl9322021-12-18
  • js教程Javascript 模擬mvc實現點餐程序案例詳解

    Javascript 模擬mvc實現點餐程序案例詳解

    這篇文章主要介紹了Javascript 模擬mvc實現點餐程序案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參...

    LiOnTalKING12152021-12-18
主站蜘蛛池模板: 国产成人福利色视频 | 99精品视频在线观看 | 大陆国产精品视频 | 午夜网| 日韩一区二区三区四区区区 | 国精品午夜dy8888狼人 | 四虎在线永久免费视频网站 | 国产精亚洲视频 | sao虎影院桃红视频在线观看 | 亚洲精品国产成人中文 | 成成人看片在线 | 国产精品www夜色影视 | 精品国产中文字幕在线视频 | 国产在线看片护士免费视频 | 天使萌痴汉在线中文字幕 | 四虎国产成人亚洲精品 | 日韩毛片大全免费高清 | 女人被爽到呻吟娇喘的视频动态图 | 国产伦精一区二区三区视频 | 美女被灌浣肠失禁视频 | 亚洲 色 欧美 爱 视频 日韩 | 91精品国产9l久久久久 | 四虎影视永久免费视频观看 | 亚洲激情视频在线 | 亚洲娇小videos | 欧美日韩视频在线成人 | 视频免费 | 风间由美m3u8在线 | 激情艳妇 | 乌克兰17一18处交 | 免费看国产一级特黄aa大片 | 国产成人在线小视频 | 狠狠燥| 日韩一区二区三区不卡视频 | 欧美国产日本精品一区二区三区 | 视频精品一区二区三区 | 精品日本三级在线观看视频 | 国产精品一区牛牛影视 | 国产亚洲精品美女2020久久 | 欧美a级完整在线观看 | 98精品全国免费观看视频 |