功能描述:
点击按钮,按钮向下滑动到页面外,同时输入框向上滑动到页面中。点击页面其他部位,按钮向上滑动到页面中,输入框向下滑动到页面外。
实现的技术点:
给页面其他元素绑定点击事件,判断点击的不是输入框则将输入框隐藏,将输入按钮切换显示。
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 });