超详细！模仿哔哩哔哩搭建静态网页 |
您所在的位置：网站首页 › 无法访问哔哩哔哩网页 › 超详细！模仿哔哩哔哩搭建静态网页 |
|
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: "扫码下载手机客户端" }); $("#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: "扫码下载手机客户端" }) })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: "扫码下载手机客户端" }); }) // 图片拉伸效果 $(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等开源框架和插件。如此，才仅仅能搭建一个静态的页面，而要实现动态页面，背后的要求势必更高。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |