Jquery仿百姓網的意見反饋和返回頂部特效
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>在線演示和下載
本文由用戶 dengjianbin 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!