分享一段微信摇一摇代码，有兴趣的可以试一试

最新推荐文章于 2021-05-26 16:52:52 发布

转载最新推荐文章于 2021-05-26 16:52:52 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/369cloud/p/5391506.html

文章标签：

#javascript #ViewUI

本文介绍了一种基于网页的摇一摇功能实现方案。通过引入多种JavaScript库，包括jQuery、Howler.js等，结合HTML5特性，实现了移动端网页上的摇动交互效果。该方案还包含了样式文件和必要的图片资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <meta charset="UTF-8">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
 7 <title>摇一摇</title>
 8 <link rel="stylesheet" href="http://down.admin5.com/demo/code_pop/19/1089/css/shake.css">
 9 <link rel="stylesheet" href="http://down.admin5.com/demo/code_pop/19/1089/css/myDialog.css">
10 <script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/jquery.min.js"></script>
11 <script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/howler.min.js"></script>
12 <script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/fastclick.js"></script>
13 <script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/shake.js"></script>
14 <script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/myDialog.js"></script>
15 </head>
16 <body>
17  
18 <table id="container">
19 <tbody>
20     <tr>
21         <td class="container" colspan="2">
22             <div id="shake">
23                 <img src="http://down.admin5.com/demo/code_pop/19/1089/images/inner.png" class="inner">
24                 <img src="http://down.admin5.com/demo/code_pop/19/1089/images/shake.png" class="shake_up" id="shakeup">
25                 <img src="http://down.admin5.com/demo/code_pop/19/1089/images/shake.png" class="shake_down" id="shakedown">
26             </div>
27             <div id="loading" class="loading"></div>
28         </td>
29     </tr>
30     <tr id="controlbar">
31         <td class="controlbar">
32             <img src="http://down.admin5.com/demo/code_pop/19/1089/images/sdy.png" width="40" height="53"><br>手动摇
33         </td>
34     </tr>
35     <tr id="cantshake" style="display:none"><td class="controlbar" colspan="2">对不起，您的手机无法支持摇一摇！</td></tr>
36 </tbody>
37 </table>
38 </body>
39 </html>