2018年04月6日网站服务器迁移完成……

jQuery和CSS3时尚手机聊天框界面动画特效

Css 苏 demo 1705℃ 0评论

这是一款效果非常时尚大方的jQuery和CSS3手机聊天框界面动画特效。该聊天框界面适合用于各类手机APP的聊天界面布局。当用户选择某个头像的时候,该头像会放大移动到屏幕的上方,并显示与该用户的聊天记录。

1

在线演示 下载插件

制作方法

HTML结构

该聊天框界面使用嵌套<div>的HTML结构,每一个.friend代表一个朋友。最底部使用div#search来制作一个搜索框效果。

  1. <div id=”chatbox”>
  2.   <div id=”friendslist”>
  3.       <div id=”topmenu”>
  4.           <span class=”friends”></span>
  5.             <span class=”chats”></span>
  6.             <span class=”history”></span>
  7.         </div>
  8.         <div id=”friends”>
  9.           <div class=”friend”>
  10.               <img src=”img/1_copy.jpg” />
  11.                 <p>
  12.                   <strong>Miro Badev</strong>
  13.                   <span>mirobadev@gmail.com</span>
  14.                 </p>
  15.                 <div class=”status available”></div>
  16.             </div>
  17.             ……
  18.             <div id=”search”>
  19.               <input type=”text” id=”searchfield” value=”Search contacts…” />
  20.             </div>
  21.         </div>
  22.     </div>
  23.     <div id=”chatview” class=”p1″>
  24.         <div id=”profile”>
  25.             <div id=”close”>
  26.                 <div class=”cy”></div>
  27.                 <div class=”cx”></div>
  28.             </div>
  29.             <p>Miro Badev</p>
  30.             <span>miro@badev@gmail.com</span>
  31.         </div>
  32.         <div id=”chat-messages”>
  33.           <label>Thursday 02</label>
  34.             <div class=”message”>
  35.               <img src=”img/1_copy.jpg” />
  36.                 <div class=”bubble”>
  37.                   Really cool stuff!
  38.                     <div class=”corner”></div>
  39.                     <span>3 min</span>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.         <div id=”sendmessage”>
  44.           <input type=”text” value=”Send message…” />
  45.             <button id=”send”></button>
  46.         </div>
  47.     </div>
  48. </div>

复制代码

该聊天框特效的动画效果主要使用CSS3 transition配以合适的easing效果和cubic-bezier函数。

jQuery代码主要用于处理搜索框的聚焦事件,以及用户点击聊天框中的头像时,为相应的元素添加和移除相应的class。并且使用animate函数和fadeIn、fadeOut函数制作头像的移动动画及淡入淡出的效果。

via: http://www.htmleaf.com/jQuery/Layout-Interface/201505191860.html

打赏

转载请注明:苏demo的别样人生 » jQuery和CSS3时尚手机聊天框界面动画特效

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情