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> 扫码下载手机客户端</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> 扫码下载手机客户端</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> 扫码下载手机客户端</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等开源框架和插件。如此，才仅仅能搭建一个静态的页面，而要实现动态页面，背后的要求势必更高。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
