模拟微信聊天输入框切换效果的实现

功能描述：

点击按钮，按钮向下滑动到页面外，同时输入框向上滑动到页面中。点击页面其他部位，按钮向上滑动到页面中，输入框向下滑动到页面外。

实现的技术点：

给页面其他元素绑定点击事件，判断点击的不是输入框则将输入框隐藏，将输入按钮切换显示。

1 var commentInputWrapper = document.getElementsByClassName('commentInputWrapper')[0];
2         document.body.addEventListener('click',function(){
3             　　var that = event.target||event.srcElement;
4             　　if(that.parentNode.getAttribute('class')!=('buttonSignNow')&&that.parentNode.getAttribute('class')!=('commentSendButton')&&that.parentNode.getAttribute('class')!=('commentInput')&&that.parentNode.getAttribute('class')!=('commentPicAdd')
5                 ){
6                 commentInputWrapper.style.display='none';
7                 document.getElementById('activityComment').style.display='block';
8             };
9         },false);

效果改进版（使用jquery增加了动画），并且隐藏状态由display:none;改为了bottom:-56px（按钮栏和输入框栏的高度）;

 1 $(document).ready(function(){
 2 
 3             document.body.addEventListener('click',function(){
 4             var that = event.target||event.srcElement;
 5             if(that.parentNode.getAttribute('class')!=('buttonCommentNow')&&that.parentNode.getAttribute('class')!=('commentSendButton')&&that.parentNode.getAttribute('class')!=('commentInput')&&that.parentNode.getAttribute('class')!=('commentPicAdd')
 6                 ){
 7                 $('.commentInputWrapper').animate({bottom:'-56px'},200,function(){
 8                         $('.buttonCommentNow').animate({bottom:'0px'},200);
 9                     });
10             };
11         },false); 
12             });

模拟微信聊天输入框切换效果的实现

推荐阅读