手机端在线聊天特效【原创】

查看演示 下载资源 下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入一个CSS样式文件、远程调用jQuery库，并引入一个JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/chat.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/flexible.js"></script>

页面的body部分，主要时设置页面初始化时的聊天窗口显示内容，代码如下：

<header class="header">
	<a class="back" href="javascript:history.back()"></a>
	<h5 class="tit">来自星星的你</h5>
	<div class="right">资料</div>
</header>
<div class="message">
	<div class="send">
		<div class="time">07/15 08:06</div>
		<div class="msg">
			<img src="images/touxiang.png" alt="" />
			<p><i class="msg_input"></i>我真的单身400年了！</p>
		</div>
	</div>
	<div class="show">
		<div class="time">07/15 08:08</div>
		<div class="msg">
			<img src="images/touxiangm.png" alt="" />
			<p><i clas="msg_input"></i>你是在逗我吗，都敏俊兮？</p>
		</div>
	</div>
</div>
<div class="footer">
	<img src="images/hua.png" alt="" />
	<img src="images/xiaolian.png" alt="" />
	<input type="text"  />
	<p>发送</p>
</div>

页面的底部，引入一个JS文件，用于控制聊天的回复等内容，代码如下：

<script type="text/javascript" src="js/chat.js" charset="utf-8"></script>