小Q

忽略往往是错误的...

笔记

微信摇一摇代码分享

已有 729 次阅读2016-04-08 20:32 |系统分类: HTML5/CSS3 |

大家相比都使用过微信摇一摇,但是有谁了解过怎么去实现呢,或者说怎么去试着写一个出来呢,下面我找到一段代码可以分享给大家参考,大家也可以一步的改写。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>摇一摇</title>
<link rel="stylesheet" href="http://down.admin5.com/demo/code_pop/19/1089/css/shake.css">
<link rel="stylesheet" href="http://down.admin5.com/demo/code_pop/19/1089/css/myDialog.css">
<script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/jquery.min.js"></script>
<script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/howler.min.js"></script> 
<script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/fastclick.js"></script> 
<script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/shake.js"></script>
<script type="text/javascript" src="http://down.admin5.com/demo/code_pop/19/1089/js/myDialog.js"></script>
</head>
<body>

<table id="container">
<tbody>
	<tr>
		<td class="container" colspan="2">
			<div id="shake">
				<img src="http://down.admin5.com/demo/code_pop/19/1089/images/inner.png" class="inner">
				<img src="http://down.admin5.com/demo/code_pop/19/1089/images/shake.png" class="shake_up" id="shakeup">
				<img src="http://down.admin5.com/demo/code_pop/19/1089/images/shake.png" class="shake_down" id="shakedown">
			</div>
			<div id="loading" class="loading"></div>
		</td>
	</tr>
	<tr id="controlbar">
		<td class="controlbar" onclick="javascript:shake();">
			<img src="http://down.admin5.com/demo/code_pop/19/1089/images/sdy.png" width="40" height="53"><br>手动摇
		</td>
	</tr>
	<tr id="cantshake" style="display:none"><td class="controlbar" colspan="2">对不起,您的手机无法支持摇一摇!</td></tr>
</tbody>
</table>
</body>
</html>

本文来之前端社区网

标签: 微信摇一摇 举报

收藏 0人收藏
给个赞1人点赞

笔记作者:小Q

笔记链接:

评论
0 /300