超详细！模仿哔哩哔哩搭建静态网页

Web静态页面开发实战学习总结

一、构思与前期准备

灵感来源于csdn博客上看到的其他人开发的模仿官方网站的开发文档，同时鉴于自己喜欢二次元的风格。决定自主设计出一个模仿哔哩哔哩·的低配版哔哩哔哩网页。这里给出链接：https://char-actructer.github.io/fang-Bilibili/

素材准备：哔哩哔哩官网上或网页界面下载主站png,jpg,gif图片，参考哔哩哔哩某up教程获取主站svg界面图标，选取图标并进行重命名保存。

资源准备：哔哩哔哩网页源代码，csdn博客《哔哩哔哩网页仿写总结》

bootstrap框架下载并学习使用

基于H5 video开发的视频播放插件：supervideo.js

二、主要页面设计流程

1、登陆界面

添加自定义css文件，除背景图片及基本颜色大小等设置外，新增不透明度，阴影和渐变色设置；

模仿登陆界面添加相应图片效果及文字后，添加js代码，实现输入相应的pwd和username之后点击登陆跳转到主站：

$(function() {

​                $(".qrcode-box").mouseover(function() {

​                    $(".qrcode-tips").addClass("mouse")

​                })

​                $(".qrcode-box").mouseout(function() {

​                    $(".qrcode-tips").removeClass("mouse")

​                })

​                $('#app').popover({

​                    trigger: 'hover',

​                    html: true,

​                    content: "<img src='img/sao.png'><br><span>&nbsp&nbsp&nbsp扫码下载手机客户端</span>"

​                });

​                $("#btn1").click(function() {

​                    if ($("#use").val() == "123", $("#pwd").val() == "321") {

​                        window.location.href = "index.html"

​                        alert("欢迎回来")

​                    } else {

​                        alert("密码错误")

​                    }

​                })

​                $("#btn2").click(function() {

​                    window.location.href = "pwd.html"

​                });

​            })

2、注册界面

同样的，实现相应界面搭建后（主站导航，图标，输入框，select标签等）

利用js代码实现了一个简单的鼠标移动弹出图片的功能：鼠标移动到“下载app”时弹出二维码图片。

$(function() {

​                $('#app').popover({

​                    trigger: 'hover',

​                    html: true,

​                    content: "<img src='img/sao.png'><br><span>&nbsp&nbsp&nbsp扫码下载手机客户端</span>"

​                })

​            })

3、视频播放界面

同上，定义相应css文件并搭建基本布局后。可利用前面引入的supervideo.js文件实现视频播放以及弹幕功能：

定义如下js文件：

const nextControl = new Super.NextControl()

const Dbspeen = new Super.DbspeenControl()

const BarrageControl = new Super.BarrageControl()

const fullScreenControl = new Super.FullScreenControl()

const video = new Super.Svideo('videoContainer', {

​    source: new Super.VideoSource({

​        src: './video/one.mp4'

​    }),

​    leftControls: [nextControl],

​    rightControls: [Dbspeen, fullScreenControl],

​    centerControls: [BarrageControl]//弹幕

})


nextControl.addEventListener('click', () => {

​    alert('click next menu !!!')

})

fullScreenControl.addEventListener('fullscreen', () => {

​    console.log('is fullscreen !!!')

​    $("#navigation").hide()

​    $("#text").hide()

​    $("#text2").hide()

})

fullScreenControl.addEventListener('cancelfullscreen', () => {

​    console.log('cancel fullscreen !!!')

​    $("#navigation").show()

​    $("#text").show()

​    $("#text2").show()

})

video.addEventListener('fullscreen', () => {

​    console.log('is fullscreen !!!')

})

video.addBarrage(new Super.Barrage('冲冲冲！！！', {

​    color: 'red',

​    fontSize:'30px',

}))

video.addBarrage('太强了趴~~~~~~')

video.addBarrage('针不戳！！！！！！')

4、主站界面

（主站每个视频的跳转链接都是上面的video）

光标移动弹出界面效果，图片拉伸效果，视频点击效果：定义如下js代码

// popover提示框

$(function() {

​    $('#app').popover({

​        

​        trigger: 'hover',

​        html: true,

​        content: "<img src='img/sao.png'><br><span>&nbsp&nbsp&nbsp扫码下载手机客户端</span>"

​    });

})

// 图片拉伸效果

$(function() {

​    $("#one_1").find(".info").hide()

​    $("#one_2").find(".info").hide()

​    $("#one_3").find(".info").hide()

​    $("#one_4").find(".info").hide()

​    $("#one_5").find(".info").hide()

​    $("#one_6").find(".info").hide()

​    $("#one_1").mouseover(function() {

​        $("#one_2").find(".info").slideUp()

​        $("#one_3").find(".info").slideUp()

​        $("#one_4").find(".info").slideUp()

​        $("#one_5").find(".info").slideUp()

​        $("#one_6").find(".info").slideUp()

​        $(this).find(".info").slideDown()

​    })

​    $("#one_2").mouseover(function() {

​        $("#one_1").find(".info").slideUp()

​        $("#one_3").find(".info").slideUp()

​        $("#one_4").find(".info").slideUp()

​        $("#one_5").find(".info").slideUp()

​        $("#one_6").find(".info").slideUp()

​        $(this).find(".info").slideDown()

​    })

​    $("#one_3").mouseover(function() {

​        $("#one_1").find(".info").slideUp()

​        $("#one_2").find(".info").slideUp()

​        $("#one_4").find(".info").slideUp()

​        $("#one_5").find(".info").slideUp()

​        $("#one_6").find(".info").slideUp()

​        $(this).find(".info").slideDown()

​    })

​    $("#one_4").mouseover(function() {

​        $("#one_1").find(".info").slideUp()

​        $("#one_2").find(".info").slideUp()

​        $("#one_3").find(".info").slideUp()

​        $("#one_5").find(".info").slideUp()

​        $("#one_6").find(".info").slideUp()

​        $(this).find(".info").slideDown()

​    })

​    $("#one_5").mouseover(function() {

​        $("#one_1").find(".info").slideUp()

​        $("#one_2").find(".info").slideUp()

​        $("#one_3").find(".info").slideUp()

​        $("#one_4").find(".info").slideUp()

​        $("#one_6").find(".info").slideUp()

​        $(this).find(".info").slideDown()

​    })

​    $("#one_6").mouseover(function() {

​        $("#one_1").find(".info").slideUp()

​        $("#one_2").find(".info").slideUp()

​        $("#one_3").find(".info").slideUp()

​        $("#one_4").find(".info").slideUp()

​        $("#one_5").find(".info").slideUp()

​        $(this).find(".info").slideDown()

​    })

​    $("#slidershow2").mouseover(function() {

​        $("#one_1").find(".info").slideUp()

​        $("#one_2").find(".info").slideUp()

​        $("#one_3").find(".info").slideUp()

​        $("#one_4").find(".info").slideUp()

​        $("#one_5").find(".info").slideUp()

​        $("#one_6").find(".info").slideUp()

​    })

})

$(function() {

​    $("#img4").find("div").find("img").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#img4").find("div").find("img").mouseover(function() {

​        $(this).css("opacity","0.5")

​    })

​    $("#img4").find("div").find("img").mouseout(function() {

​        $(this).css("opacity","1")

​    })

})

// 视频播放跳转

$(function() {

​    $("#one_1").find(".info").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#one_2").find(".info").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#one_3").find(".info").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#one_4").find(".info").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#one_5").find(".info").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#one_6").find(".info").click(function() {

​        window.location.href = "video.html"

​    })

​    $("#head").click(function() {

​        window.location.href = "user.html"

​    })

​    $("#zx").click(function() {

​        window.location.href = "user.html"

​    })

})

三、完成心得总结

首先一句话总结：所谓的前端有手就行完全是放屁。

且不说界面的设计需要考察个人审美，即便看似简单的效果，要想实现也是讲究颇多，除了自学一下js语言之外

还需要合理可利用bootstrap，supervideo等开源框架和插件。如此，才仅仅能搭建一个静态的页面，而要实现动态页面，背后的要求势必更高。