做有态度的前端团队

网易FEG前端团队

大话西游手游官网改版总结

最近做大话西游官网改版,从先前的版本中学到了不少知识,总结了分享下

1、加载背景图片,把背景图放在showBg样式里

function loadBg(ele) {
    ele.each(function() {
        var $this = $(this);

        if ($this.hasClass('showBg')) {
            return
        }
        $this.addClass('showBg');
    })
}

2、加载图片,把图片地址放在data-src属性里,如果存在data-src就放在src里,然后去掉data-src属性

function loadImg(ele) {
    ele.each(function() {
        var $this = $(this),
            imgSrc = $this.attr("data-src");

        if (!imgSrc) {
            return
        }
        $this.attr('src', imgSrc);
        $this.removeAttr("data-src");
    })
}

3、滚动加载某个模块图片,首先获取对应模块相对文档的top值,跟浏览器卷去的scrollTop比较

function scrollLoad() {
    var $win = $(window),
        view_height = $win.height() + 100,
        win_top = $win.scrollTop(),

        // 魔王
        $mowangul = $('#Jmowangul'),
        $con_wrap14_mainbox = $('.con-wrap14 .con-main-box'),
        $mowangul_imgs = $mowangul.find("img"),
        mowangul_top = $mowangul.offset().top - view_height,
        iscroll = false;

    compare();

    $win.bind('scroll', function() { //监听滚动
        if (iscroll) {
            return;
        }

        iscroll = true;

        setTimeout(function() {
            win_top = $win.scrollTop();
            compare();
            iscroll = false;
        }, 300)
    })

    function compare() { //比较加载对应模块
        if (win_top >= mowangul_top) {
            loadImg($mowangul_imgs);
            loadBg($con_wrap14_mainbox);
        }
    }
}

4、获得浏览器宽度,加载对应样式

function windowResize() {
    var w = $(window).width();

    if (w < 1400) {
        $('.wrap').addClass('wrap-1200');
    } else {
        $('.wrap').removeClass('wrap-1200');
    }
}
windowResize();
$(window).resize(function() {
    windowResize();
});

5、如果祖先元素设置了overflow:hidden,那么超出的部分会被隐藏掉,以下代码可以很方便的实现

1.png

<div id="jnPopBox" class="jn-pop-box"></div>
.jn-pop-box{position:absolute;z-index:10;background:#fff;display:none;}
$("#Jstrategy").on('.pic', 'mouseover', function() {
    var html = $(this).find(".jn-tips-box").html(),
        scrollX = document.documentElement.scrollLeft || document.body.scrollLeft,
        scrollY = document.documentElement.scrollTop || document.body.scrollTop,
        offsetnod = $(this).offset();

    $("#jnPopBox").html(html).css({
        'display': 'block',
        'left': offsetnod.left - 50,
        'top': offsetnod.top + 34
    });
}).on('.pic', 'mouseout', function() {
    $("#jnPopBox").html("").css({
        'display': 'none'
    });
});

手机阅读请扫描下方二维码:

已有 1 条评论

  1. xiejianan

    最后一个也可以用纯css的hover效果实现,内容实现写在对应的html里就好。

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif