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

二维码效果完全没有
字与图片切换只有最后一个按钮有效
无法实现切换的字都不一样，如果问题二解决了，只能全部换成字“买”
如果想第三个按钮点击时二维码与第三个按钮平行，第四个按钮点击时二维码与第四个按钮平行，怎么写代码
写代码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