cc练习2"/>
【fgm.cc练习2
练习地址：.html
鼠标移到在图片上面，不透明度增加。
实现思路：通过循环使用JavaScript的createElement（）方法创建10个div节点，为它们增加样式：背景图片，margin等，最后加到container的div中作为子节点。
代码如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>图片列表：鼠标移入/移出改变图片透明度</title><link rel="stylesheet" type="text/css" href="6_opacity.css">
</head>
<body><div id="container"></div><script type="text/javascript" src="6_opacity.js"></script>
</body>
</html>
CSS
#container {width: 810px;height: 430px;border: 1px solid black;margin: 0 auto;/*display: flex;*/
}
.node {width: 150px;height: 200px;margin: 10px 0 0 10px;padding: 0;float: left;opacity: 0.4;
}
.node:hover {opacity: 1;cursor: crosshair;
}
这里还学到一个cursor的属性值：crosshair。“交叉的头发”？？？哈哈哈很形象的十字。
JavaScript
window.onload = function() {var node = new Array();var container = document.getElementById("container");for(var i=0; i<10; i++){node[i] = document.createElement("div");node[i].className = "node";node[i].style.background = "url(../../photos/"+(i+1)+".jpg)";node[i].style.backgroundSize = "100%";container.appendChild(node[i]);}
}
有时候灵感真的很重要，一下子救我于水火之中。这个背景图片的path我一开始是这样写的：
"url('../../photos/'+i+'.jpg')"
老实说我是不知道怎么写，但我感觉就是这样写，可老是跑不出来，看着看着，突然灵光一现！emmm…好像还可以这样写：
"url(../../photos/"+(i+1)+".jpg)"
And then，我就跑起来了哈哈哈哈哈哈哈哈！看了一下原网页的源代码，它是在HTML中直接加10个li来实现的，我有点小开心嘻嘻嘻…
更多推荐
【fgm.cc练习2
发布评论