我想实现慕课网的效果（课外），我觉得只要稍加修改不报错实现就好，很好奇，还是想老师纠错
1.二维码效果完全没有
2.字与图片切换只有最后一个按钮有效
3.无法实现切换的字都不一样，如果问题二解决了，只能全部换成字“买”
4.如果想第三个按钮点击时二维码与第三个按钮平行，第四个按钮点击时二维码与第四个按钮平行，怎么写代码
5.写代码for循环有多个时，变量是否能全部写成i？（我这里写的都不一样）
<!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>27
收起
正在回答
2回答
同学你好，课外知识需要自己去拓展延伸，根据课程学习过的知识去实现，这样才能提升技能。另外这些问题都涉及到作用域的问题，给你举了一个修改示例：
for (var i = 2; i < shuzu.length; i++) {
(function(i) {
var target = document.querySelector(shuzu[i]);
target.onmouseover = function() {
var erweima = document.querySelector(".erweima");
var classanniu = erweima.getAttribute("class");
erweima.setAttribute("class", classanniu.replace('_animate_init', '_animate_done'));
}
target.onmouseout = function() {
var erweima = document.querySelector(".erweima");
var classanniu = erweima.getAttribute("class");
erweima.setAttribute("class", classanniu.replace('_animate_done', '_animate_init'));
}
})(i)
}这边测试是可以实现二维码显示隐藏效果的，因为没有图片，使用文字代替了：
同学静下心来一点一点的去修改完善，相信自己可以实现的，如果还是存在问题，建议复习一下作用域课程以及后面的练习，对理解也有一定的帮助：
https://class.imooc.com/lesson/788#mid=19788
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星