用色块代替图片模拟慕课网的效果，出现几个问题（课外）

二维码效果完全没有
字与图片切换只有最后一个按钮有效
无法实现切换的字都不一样，如果问题二解决了，只能全部换成字“买”
如果想第三个按钮点击时二维码与第三个按钮平行，第四个按钮点击时二维码与第四个按钮平行，怎么写代码
写代码for循环有多个时，变量是否能全部写成i？（我这里写的都不一样）
效果图见提问：https://class.imooc.com/course/qadetail/181149

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        *{margin: 0;padding: 0;}
        body{background-color: blue;}
        .box{position: fixed;padding: 5px 10px;top: calc(50% - 69px);right: 0;background-color: white;}
        .anniu{margin: 10px auto;background-image: url("anniu.jpg");width: 20px;height: 20px;cursor: pointer;
            text-align: center;line-height: 20px;font-size: 14px;}
        .erweima{position: absolute;bottom: 0;right: 40px;background-image: url("erweima.jpg");width: 160px;height: 200px;}
    </style>
    <style>
        .erweima{transform-origin: 100% 100%;transition: all 1s;}
        .erweima_animate_init{opacity: 0;transform: scale(0);}
        .erweima_animate_done{opacity: 1;transform: scale(1);}
    </style>
</head>
 
<body>
    <div class="box">
        <div class="anniu zi1"></div>
        <div class="anniu zi2"></div>
        <div class="anniu zi3"></div>
        <div class="anniu zi4"></div>
        <div class="erweima erweima_animate_init"></div>
    </div>
    <script>
    var shuzu=[".zi1",".zi2",".zi3",".zi4"];
    for(var i=2;i<shuzu.length;i++){
        var target=document.querySelector(shuzu[i]);
        target.onmouseover=function(){
            var erweima=document.querySelector("erweima");
            var classanniu=erweima.getAttribute("class");
            classanniu.setAttribute("class",classanniu.replace('_animate_init','_animate_done'));
        }
    }
    for(var j=2;j<shuzu.length;j++){
        var mubiao=document.querySelector(shuzu[j]);
        target.onmouseout=function(){
            var erweima=document.querySelector("erweima");
            var classanniu=erweima.getAttribute("class");
            classanniu.setAttribute("class",classanniu.replace('_animate_done','_animate_init'));
        }
    }
    for(var d=0;d<shuzu.length;d++){
        var zi=document.querySelector(shuzu[d]);
        zi.onmouseover=function(){
            zi.style.backgroundImage="none";
            zi.innerHTML="买";
        }
    }
    for(var d=0;d<shuzu.length;d++){
        var zi=document.querySelector(shuzu[d]);
        zi.onmouseout=function(){
            zi.style.backgroundImage="url('anniu.jpg')";
            zi.innerHTML="";
        }
    }
    </script>
</body>
</html>

迷失的小麦 2019-12-28

源自：宣传页项目 5-6 作业题

收起

1回答

好帮手慕慕子 2019-12-28 14:01:33

同学你好，目前阶段，课程与练习以及作业中不需要实现这种效果。学习要循序渐进，目前最重要的是打好基础。建议：同学先跟着课程学习，把课程中的案例多练习几遍，做好练习题与作业。

后面的实战课程中对这种类似的效果，会有相应的讲解，到时候同学重点学习一下，再去尝试自己写效果，这样对自己的编程能力才会有更大的帮助与提升。如下：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者迷失的小麦 #1

也就是说目前的技术不足以支撑完成这个快捷按钮？

2019-12-28 16:32:44
好帮手慕慕子回复提问者迷失的小麦 #2

同学你好，可以这么理解。因为课程安排就是从基础到进阶，然后学习前端必备的技能，最后才是接轨企业的实战项目，所以同学不要着急，跟着课程安排学习就可以了。目前阶段主要是需要打好基础，将老师讲解的基础点弄明白，完全掌握了，后面学习进阶知识才能更快更好的理解，祝学习愉快~

2019-12-28 19:06:55