lolSix周年活动页面-白红宇

小白文采不好,大佬们看见了多多指点,自己的代码可能也有很多"毒瘤"希望大佬们指点~~

在掘金看到了一个大佬发的的文章

效果非常 very nice 也很有意思

于是进看看效果只剩下哇塞!哇塞!哇塞!

于是自己决定试试,参考首页写一部分效果,于是... 有图有真相

ps:

如果觉得不错的话,可以给个star鼓励一下蟹蟹~~

两个动画都是通过改变class来完成的效果,简单粗暴赞~(≧▽≦)/~\

(function () {    // 定义所需要的变量    let navBtns = $('#nav-ul i')    let navBtnli = $('#nav-ul li')    let navhs = $('#nav li')    let navhem = $('#nav em')    // 两个改变class的计数变量    let numLi = {        numi: 1,        numh: 1    }    // 清楚定时器的变量    let time = null    // 鼠标经过和移除 触发run方法    navBtnli.on('mouseover', function () {        let navI = $(this).children('i')        run(navI, 'ans2_btn', numLi.numi)    })    navBtnli.on('mouseout', function () {        let target = $(this).children('i')        stop(target)    })    navhs.on('mouseover', function () {        $(this).removeClass('ligb')        let navh = $(this).children('em')        run(navh, 'ans_btn', numLi.numh)    })    navhs.on('mouseout', function () {        let target = $(this).children('em')        stop(target)        $(this).addClass('ligb')    })    // 接受三个参数, 需要改变的对象, 需要改变的名字, 需要改变的数    function run(obj, name, num) {        // js定时器setTimeout 无法调用局部变量的解决办法        function runs() {            if (num > 25) {                num = 1            }            obj.css('display', 'block')            obj.removeClass()            obj.addClass(nameNav + num)            num++            time = setTimeout(function () {                clearTimeout(time)                runs()            }, 30)        }        runs()    }    // 停止动画    function stop(target) {        clearTimeout(time)        target.css('display', 'none')    }})()复制代码

html结构请参考官方页面或者我的仓库里面的html文件

然后就是中间的 flash 动画,使用了html object标签,

但是我在Ubuntu上面chrome测试的时候正常没有问题,(自己在Ubuntu开虚拟机上win测试,IE11,360有效果,chrome,firefox就没有了,懵逼希望有大佬可以跟我提点一二)

但是在Firefox测试的时候不会显示,

于是用了兼容的处理方法,先贴一个通用的处理方法(自己也研究了一会儿,第一次接触2333~~),

// 这是活动页面的解决办法    // 大家也可以看看这个文档 https://github.com/swfobject/swfobject     // An open source Javascript framework for detecting the Adobe Flash Player plugin and embedding Flash (swf) files.    // 自己英文比较垃圾 chrome 翻译过来就是    // 用于检测Adobe Flash Player插件并嵌入Flash（swf）文件的开源Javascript框架。    // 这个文件可以引用腾讯的,也可以下载,也可以新建文件复制粘贴            复制代码

虽然解决了引入swf动画的兼容问题,但是在firefox上面根本不显示啊 23333~~~

大佬的解决办法非常简单请继续细心观看文章!

// 提前在html结构上面写一个静态的替代图片,然后隐藏
    
     英雄联盟6周年盛典
    
// 这里是swf文件的位置
    
// 通过判断 来显示静态图片(虽然没有了swf动画,但是总不不显示比较好 赞 学习了~!) setTimeout(function () {    if ($(".mymovie").length > 0) {        $(".logob").css({            "display": "block"        });    }}, 1000)复制代码

大概就是跌么多了! 如果有不对的地方希望大佬们多多指正,

也可以加小白我交流2333~~ Qq: 952822399

自己大二也快要毕业了QAQ,希望被大佬们带走!!!

新开了个Qq群，大家也可以进来互相交流~ iD 718639024