首頁 > web前端 > js教程 > 使用JS實現氣泡跟隨滑鼠移動動畫特效實例詳解

使用JS實現氣泡跟隨滑鼠移動動畫特效實例詳解

巴扎黑
發布: 2017-09-18 09:41:51
原創
2134 人瀏覽過

氣泡跟隨滑鼠移動,並在每次點擊時產生不同的變化,效果非常迷人,下面小編給大家帶來了,基於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

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE html>

<html lang="en">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>

简单的气泡效果

</title>

 <style type="text/css">

 body{background-color:#000000;margin:0px;overflow:hidden}

 </style>

 </head>

 <body>

 </body>

</html>

<script>

 var canvas = document.createElement(&#39;canvas&#39;),

 context = canvas.getContext(&#39;2d&#39;),

 windowW = window.screen.width ,

 windowH = window.screen.height ,

 Mx,

 My,

 paused = true;

 suzu = [];

 booms = [];

 boomks = [];

 start();

 canvas.onmousemove = function(e) {

 var loc = canvasMove(e.clientX, e.clientY);

 Mx = loc.x;

 My = loc.y

 };

 canvas.onmousedown = function() {

 creatarry(Mx, My);

 paused = !paused

 };

 function creatarry(a, b) {

 for (var i = 0; i < 40; ++i) {

 booms[i] = {

 x: a,

 y: b,

 gravity: 0.3,

 speedX: Math.random() * 20 - 10,

 speedY: Math.random() * 15 - 7,

 radius: Math.random() * 15,

 color: Math.random() * 360,

 apc: 0.6

 };

 boomks.push(booms[i]);

 if (boomks.length > 300) {

 boomks.shift()

 };

 console.log(boomks)

 }

 };

 function loop1() {

 boomks.forEach(function(circle) {

 context.beginPath();

 context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);

 context.fillStyle = &#39;hsla(&#39; + circle.color + &#39;,100%,60%,&#39; + circle.apc + &#39;)&#39;;

 context.fill();

 movecircles(circle)

 })

 }

 function movecircles(circle) {

 circle.x += circle.speedX;

 circle.speedY += circle.gravity;

 circle.y += circle.speedY;

 circle.apc -= 0.008

 }

 function canvasMove(x, y) {

 var bbox = canvas.getBoundingClientRect();

 return {

 x: x - bbox.left * (canvas.width / bbox.width),

 y: y - bbox.top * (canvas.height / bbox.height)

 }

 };

 function start() {

 document.body.appendChild(canvas);

 canvas.width = windowW;

 canvas.height = windowH;

 setInterval(fang, 25)

 }

 function fang() {

 context.clearRect(0, 0, canvas.width, canvas.height);

 loop1();

 loop()

 }

 function loop() {

 var circle = new createCircle(Mx, My);

 suzu.push(circle);

 for (i = 0; i < suzu.length; i++) {

 var ss = suzu[i];

 ss.render(context);

 ss.update()

 }

 if (suzu.length > 1000) {

 suzu.shift()

 }

 }

 function createCircle(x, y) {

 this.x = x;

 this.y = y;

 this.color = Math.random() * 360;

 this.radius = Math.random() * 25;

 this.xVel = Math.random() * 5 - 2;

 this.apc = 0.6;

 this.gravity = 0.07;

 this.yVel = Math.random() * 10 - 3;

 this.render = function(c) {

 c.beginPath();

 c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);

 c.fillStyle = &#39;hsla(&#39; + this.color + &#39;,100%,60%,&#39; + this.apc + &#39;)&#39;;

 c.fill()

 };

 this.update = function() {

 if (!paused) {

 this.yVel += this.gravity;

 this.y += this.yVel

 } else {

 this.y -= 5

 }

 this.x += this.xVel;

 this.apc -= 0.01;

 if (this.radius > 1) {

 this.radius -= 0.4

 }

 } }

 </script>

登入後複製

以上是使用JS實現氣泡跟隨滑鼠移動動畫特效實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板