Jquery仿百姓網的意見反饋和返回頂部特效

dengjianbin 13年前發布 | 28K 次閱讀 jQuery插件 jQuery
Jquery仿百姓網的意見反饋和返回頂部特效是一款很實用、常用的功能,用了它之后會增強用戶體驗效果,直接在當前頁留言,跟隨滾動滑動,自動顯示和隱藏返回頂部功能。
 
效果如下
狀態1
Jquery插件,Jquery資源,Jquery特效,div+css 
狀態2
Jquery插件,Jquery資源,Jquery特效,div+css 
 
狀態3
Jquery插件,Jquery資源,Jquery特效,div+css

主要代碼如下:
<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 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!