【特效】Jquery动画特效

1、一个简单的jquery图片上下浮动效果

function moveRocket() {
    $(".contact1bg")
            //2000毫秒内top = top + 60;
            .animate({ 'top': '+=30' }, 1500)
            //停顿100毫秒
            .delay(100)
            //2000好秒内top = top - 60,注意:之后每100毫秒执行一次本函数
            .animate({ 'top': '-=30' }, 1500, function () {
                setTimeout(moveRocket, 100);
            });
};


2、通过jquery做网页适用显示器屏幕(全屏效果)



    $(window).resize(function () {
        $iWinHeight = $(window).height();
  

            $('.contact-details').css({
                'height': $iWinHeight
            });
 

    }).resize();

3、一个很适用的,浮动头部导航部分,当鼠标往下时隐藏导航,往上时显示出来,可以很大将页面显示最大化

   
    var MQL = 1170;
    //primary navigation slide-in effect
    if($(window).width() > MQL) {
        var headerHeight = $('.cd-header').height();
        $(window).on('scroll',
        {
            previousTop: 0
        },
        function () {
            var currentTop = $(window).scrollTop();
            //判断用户是否是往上滑动
            if (currentTop < this.previousTop ) {

                //如果是往上
                if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                    $('.cd-header').addClass('is-visible');
                } else {
                    $('.cd-header').removeClass('is-visible is-fixed');

                }
            } else {
                //如果是往下
                $('.cd-header').removeClass('is-visible');
                if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');

            }
            this.previousTop = currentTop;
        });
    }
   

Jquery动画特效

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://seo.yanjiansem.com/html/2021/webBulid_1103/30.html