HTML/CSS仿制Uplay官方网页面后记

最新推荐文章于 2022-08-10 22:10:05 发布

猪齿向前冲

最新推荐文章于 2022-08-10 22:10:05 发布

阅读量333

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_40245675/article/details/107212189

版权

仿制目标：Uplay官方网页

仿制效果：

1.因为还没有了解弹性盒该如何布局，所以虽然看起来效果一样，但是感觉自己写的页面层叠非常复杂，远没有官网的源码看起来简洁明了，这里算是目前遇到的第一个技术上的问题。
在这里插入图片描述 2.下图的页面的结构是和官网差不多的，用内边距确定内容需要的位置，然后让两个内容的width都是50%就行了，相对来说我比较信任这种有具体长度的百分比分配，在不同分辨率下比较稳定。

在这里插入图片描述
右边的图片滚动我是用JS写的,贴上代码：

var t = document.all.gdwin.offsetWidth;
    var i = 0;
    var j = 0;
    var m = 0;
setInterval(function() {
        i = i + 0.3;
        if (i > 100) {
            if (j <= t && m == 0) {
                document.getElementById('gdimg1').style.left = "-" + j + 'px';
                document.getElementById('gdimg2').style.left = (t - j) + 'px';
                j++;
                if (j == t) {
                    document.getElementById('gdimg1').style.left = t + 'px';
                    document.getElementById('gdimg2').style.left = 0 + 'px';
                    m = 1;
                    j = 0;
                    i = 0;
                }
            }
            if (j <= t && m == 1) {
                document.getElementById('gdimg2').style.left = "-" + j + 'px';
                document.getElementById('gdimg1').style.left = (t - j) + 'px';
                j++;
                if (j == t) {
                    document.getElementById('gdimg2').style.left = t + 'px';
                    document.getElementById('gdimg1').style.left = 0 + 'px';
                    m = 0;
                    j = 0;
                    i = 0;
                }
            }
        }
        if (i <= 100 && m == 0) {
            document.getElementById("radio1").checked = "checked";
        }
        if (i <= 100 && m == 1) {
            document.getElementById("radio2").checked = "checked";
        }
    }, 1)

利用一个定时器，让 i 来负责定时，因为我希望图片每隔一段时间滚动一次，而不是一直滚动，然后让被绝对定位的两张图片向同一方向滚动就行了。两张图片我是用一个相对定位div来固定的，因为div设置了overflow:hidden；所以滚动的时候没有溢出，看起来和官网的效果很相似，不过官网的移动速度更快，我其实也想更快一点，但是那就意味着setInterval的计时要低于1，我改成过0.1，不过没效果，目前还没想到用什么方法能够让这个移动效果变快，可能因为我的JS只是自学了一点，很多功能还不太了解。在这里插入图片描述
3.这里的效果其实没做好，首先下划线明显比官网细，然后没有做悬浮显示白色下划线的功能，只是从效果上来看和官网是一样的。原理也很简单，上下两个div的display一个是正常的block，一个是none就隐藏了，点击事件让JS改变display就能做成这样了，主要利用使用display:none；的时候不会为这个元素创建盒模型，不占页面空间。
贴上JS代码吧：

function club(x) {

        var k = window.getComputedStyle(x).color;
        if (k == "rgb(255, 255, 255)")
            x.style.color = "#0070ff";
        x.style.background = "rgb(255, 255, 255)";
        if (x.id == "ybclub") {
            document.getElementById("ybclub1").style.borderBottom = "2px solid #0070ff";
            document.getElementById("ybsc").style.backgroundColor = "rgba(0, 0, 0, 0)";
            document.getElementById("ybsc").style.color = "rgb(255, 255, 255)";
            document.getElementById("ybsc1").style.borderBottom = "2px solid rgba(0, 0, 0, 0)";
            document.getElementById("ff2").style.display = "block";
            document.getElementById("ff1").style.display = "none";
        }
        if (x.id == "ybsc") {
            document.getElementById("ybsc1").style.borderBottom = "2px solid #0070ff";
            document.getElementById("ybclub").style.backgroundColor = "rgba(0, 0, 0, 0)";
            document.getElementById("ybclub").style.color = "rgb(255, 255, 255)";
            document.getElementById("ybclub1").style.borderBottom = "2px solid rgba(0, 0, 0, 0)";
            document.getElementById("ff1").style.display = "block";
            document.getElementById("ff2").style.display = "none";
        }
    }

在这里插入图片描述 4.最下面就没什么好说的了，代码的质量完全不如官网，最后选择语言的地方其实应该用绝对定位一个div，然后配合js做一个上拉列表的效果，但是时间有限，留到下次试试看吧。

html遇到的问题:

1.其实是我写的时候发现的我自己的一个坏习惯，我喜欢把布局和样式都写好，然后再考虑这个元素需要不要一个a元素做跳转功能，如果要，我就在需要的元素上套一层a元素，结果在页面渲染的时候出现了我刷新html文件，页面布局正常，刷新CSS文件布局出现了问题，a元素占了空间，改变了浮动的布局。我用的解决办法其实就是把a元素直接代替子div元素，将a元素的display直接换成block就没问题了，因为每个元素都是一个盒模型，用CSS完全可以更改元素的任意一个属性，但是我太喜欢这样做，养成习惯后可能会完全忽略语义化的问题。
2.缩放问题：页面布局写完之后需要经常看看视口缩放后的页面效果，尤其是定位的元素，很容易因为视口缩放位置下坠，然后页面布局变得很丑，我目前解决的办法就是设置min-width，不允许父元素在会改变整体布局的宽度上还能继续缩放，虽然会出现滚动条，但是目前也没想到更好的解决办法。
官网的设计很巧妙----在不同的缩放层度，整个页面的布局和样式会跟随网页大小发生变化，但是以我目前的技术很难做出来这样的效果，可能以后在JS较为了解的条件下，可以尝试做出相似的效果。

JS上的问题：

虽然这次的仿制没有要求使用JS，但是我用自己学习的一点JS皮毛还是尽量去做出来和官网相似的效果。
比如固定定位的导航栏上就有两个：
在这里插入图片描述点击支持下面就会出现一个次级导航栏，再次点击支持就会消失，其实再次点击消失这个功能让我困惑了好久，后来发现用document.getElementById().style.visibility不能将css中的样式获取，来做一个判断，所以有了下面的方法。

function dzc() {
        var oDiv = document.getElementById('hzc');
        var oStyle = window.getComputedStyle(oDiv);
        var attr = oStyle.visibility;
        if (attr == 'hidden') {
            document.getElementById('hzc').style.visibility = "visible";
        }
        if (attr == "visible") {
            document.getElementById('hzc').style.visibility = "hidden";
        }
    }

在这里插入图片描述其次就是做这个搜索功能的表单，因为子元素也会触发父元素的事件，所以每次只要点击表单，表单就会隐藏，用上面的方法就不合适了。
下面是JS代码：

document.getElementById('sear1').onclick = function(e) {
        e.stopPropagation();
    }
    document.querySelector('.slogo').onclick = function(e) {
        var b = window.getComputedStyle(document.getElementById('sear1')).visibility;
        if (b == 'hidden') {
            document.getElementById('sear1').style.visibility = "visible";
            document.getElementById('sear1').focus();
        }
        // if (b == "visible") {
        //     document.getElementById('sear1').style.visibility = "hidden";
        // }
    }
    document.getElementById('sear1').onblur = function() {
        document.getElementById('sear1').style.visibility = "hidden";
    }

起初我做的和支持一样的效果，后来我想，用搜索的时候一般让表单消失，都是失去焦点自动消失，感觉更合理一点，所以做了改动，注释部分是原本的代码。

总结

这次仿制Uplay官网让我深刻了解到我对网页设计停留在非常浅薄的地步，很多效果都不甚理想，只能做到类似，却不能完全一样，更不用谈更好的效果了。写的时候也有很多问题，比如在选择浮动还是选择改成行内块的方式水平排列，一个元素是给确定的宽度还是让它随父元素的百分比分配长度。这些问题我有很强烈的感觉应该是不同的布局有确定的规范的，并不是随便做达到效果就好这么简单，一个网页在渲染的过程中必然会有效率问题，让网页更快的渲染，更快的响应在写的时候应该充分考虑，始终考虑，虽然我目前的技术水平还不足以支持我去考虑这些问题。

补充：

滚动动画JS的完善：

var t = document.all.gdwin.offsetWidth;
    var i = 0;
    var j = 0;
    var m = 0;

    function radclick(x) {
        if (x.id == "radio1") {
            document.getElementById('gdimg2').style.left = t + 'px';
            document.getElementById('gdimg1').style.left = 0 + 'px';
            m = 0;
            i = 0;
            j = 0;
        }
        if (x.id == "radio2") {
            m = 1;
            i = 0;
            j = 0;
            document.getElementById('gdimg1').style.left = t + 'px';
            document.getElementById('gdimg2').style.left = 0 + 'px';
        }
    }
    setInterval(function() {
        i = i + 0.1;
        if (i > 100) {
            if (j <= t && m == 0) {
                document.getElementById('gdimg1').style.left = "-" + j + 'px';
                document.getElementById('gdimg2').style.left = (t - j) + 'px';
                j = j + 5;
                if (j == t) {
                    document.getElementById('gdimg1').style.left = t + 'px';
                    document.getElementById('gdimg2').style.left = 0 + 'px';
                    m = 1;
                    j = 0;
                    i = 0;
                }
            }
            if (j <= t && m == 1) {
                document.getElementById('gdimg2').style.left = "-" + j + 'px';
                document.getElementById('gdimg1').style.left = (t - j) + 'px';
                j = j + 5;
                if (j == t) {
                    document.getElementById('gdimg2').style.left = t + 'px';
                    document.getElementById('gdimg1').style.left = 0 + 'px';
                    m = 0;
                    j = 0;
                    i = 0;
                }
            }
        }
        if (i <= 100 && m == 0) {
            document.getElementById("radio1").checked = "checked";
        }
        if (i <= 100 && m == 1) {
            document.getElementById("radio2").checked = "checked";
        }
    }, 1)

完善说明：为了做到和官网滚动速度相近，我改了一点滚动相关的代码，原代码让图片每次向左移动1px，我的想法是如果一次移动太多像素，人眼会觉得图片在跳动，后来发现即使我将每毫秒移动5px，人眼仍然难以察觉，但是速度和官网上滚动速度十分接近。

猪齿向前冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML/CSS仿制Uplay官方网页面后记

仿制目标：Uplay官方网页仿制效果：1.因为还没有了解弹性盒该如何布局，所以虽然看起来效果一样，但是感觉自己写的页面层叠非常复杂，远没有官网的源码看起来简洁明了，这里算是目前遇到的第一个技术上的问题。2.页面的结构是和官网差不多的，用内边距确定内容需要的位置，然后让两个内容的width都是50%就行了，相对来说我比较信任这种有具体长度的百分比分配，在不同分辨率下比较稳定。左边的图片滚动我是用JS写的,贴上代码：setInterval(function() { i = i + 0
复制链接

扫一扫