浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery手机相关插件 2017-01-03

人气7608

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

手机聊天框界面

制作方法

HTML结构

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

<div id="chatbox">
  <div id="friendslist">
      <div id="topmenu">
          <span class="friends"></span>
            <span class="chats"></span>
            <span class="history"></span>
        </div>
        
        <div id="friends">
          <div class="friend">
              <img src="img/1_copy.jpg" />
                <p>
                  <strong>Miro Badev</strong>
                  <span>mirobadev@gmail.com</span>
                </p>
                <div class="status available"></div>
            </div>
            ......
            <div id="search">
              <input type="text" id="searchfield" value="Search contacts..." />
            </div>           
        </div>                
    </div>
    <div id="chatview" class="p1">      
        <div id="profile">

            <div id="close">
                <div class="cy"></div>
                <div class="cx"></div>
            </div>
            
            <p>Miro Badev</p>
            <span>miro@badev@gmail.com</span>
        </div>
        <div id="chat-messages">
          <label>Thursday 02</label>
            
            <div class="message">
              <img src="img/1_copy.jpg" />
                <div class="bubble">
                  Really cool stuff!
                    <div class="corner"></div>
                    <span>3 min</span>
                </div>
            </div>
        </div>
      
        <div id="sendmessage">
          <input type="text" value="Send message..." />
            <button id="send"></button>
        </div>  
    </div>
</div>               
              

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

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

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:139.48KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1908.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3时尚手机聊天框界面动画特效

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)