Jquery仿百姓网的意见反馈和返回顶部特效
dengjianbin
11年前
Jquery仿百姓网的意见反馈和返回顶部特效是一款很实用、常用的功能,用了它之后会增强用户体验效果,直接在当前页留言,跟随滚动滑动,自动显示和隐藏返回顶部功能。
效果如下
状态1
状态1
状态2
状态3
主要代码如下:
<script type="text/javascript"> $(function(){ $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $animating = false; $('.fixedBtn .top').click(function(){ if ($animating == false) { $body.animate({scrollTop: 0}, 500); $animating = true; } return false; }); $(window).scroll(function(){ if ($('.fixedBtn').offset().top > 500) { $('.fixedBtn .top').css('display', 'inline-block'); } else { $('.fixedBtn .top').css('display', 'none'); $animating = false; } }); var fixedBtn = $('.fixedBtn'), feedback = $('.feedback', fixedBtn), feedbackCnt = $('.feedbackCnt'), sendBtn = $('.button', fixedBtn), content = $('textarea', fixedBtn), feedbackTips = $('.feedbackTips', fixedBtn), FBCLASS = 'fb-open', close = function(){ fixedBtn.animate({ right: '-=350' }) feedbackCnt.removeClass(FBCLASS); }, open = function(){ feedbackTips.hide(); feedbackCnt.show(); fixedBtn.animate({ right: '+=350' }); feedbackCnt.addClass(FBCLASS); }; feedback.length && feedback.on('click', function(e){ e.preventDefault(); feedbackCnt.hasClass(FBCLASS) ? close() : open(); }); }); </script>
在线演示和下载