练习地址:http://www.fgm.cc/learn/lesson2/11.html
实现效果:鼠标移到小图片上,大图片改变为相应的小图片。
实现思路:跟上篇套路一样,这里主要用到flex布局。
代码如下:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>鼠标移过,改变图片路径</title>
<link rel="stylesheet" type="text/css" href="11_changePath.css">
</head>
<body>
<div id="container">
<div id="show"></div>
<div id="col"></div>
<div id="row"></div>
</div>
<script type="text/javascript" src="11_changePath.js"></script>
</body>
</html>
CSS
html, body {
background: black;
}
#container {
width: 215px;
height: 275px;
margin: 0 auto;
border-radius: 5%;
background: white;
padding: 10px;
padding-bottom: 5px;
}
#show {
width: 160px;
height: 160px;
background: url("../../photos/1.jpg");
background-size: 100%;
}
#col {
position: relative;
top: -160px;
right: -165px;
display: flex;
flex-direction: column;
}
#row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 170px;
position: relative;
top: -270px;
}
.col, .row {
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.col {
/*border: 1px solid black;*/
}
.row {
/*border: 1px solid black;*/
margin-right: 5px;
}
JavaScript
window.onload = function() {
var col = document.getElementById("col");
var row = document.getElementById("row");
var show = document.getElementById("show");
for(var i=0; i<5; i++){
var photo = document.createElement("div");
col.appendChild(photo);
photo.className = "col";
photo.style.background = "url(../../photos/"+(i+1)+".jpg";
photo.style.backgroundSize = "100%";
photo.onmouseover = (function(n) {
return function() {
show.style.background = "url(../../photos/"+(n+1)+".jpg";
show.style.backgroundSize = "100%";
}
})(i);
}
for(var i=0; i<6; i++){
var photo = document.createElement("div");
row.appendChild(photo);
photo.className = "row";
photo.style.background = "url(../../photos/"+(i+6)+".jpg";
photo.style.backgroundSize = "100%";
photo.onmouseover = (function(n) {
return function() {
show.style.background = "url(../../photos/"+(n+6)+".jpg";
show.style.backgroundSize = "100%";
}
})(i);
}
}
其实还有一个,实践出真知。只有不断的修改达到所要的样式,才知道某个东西具体是怎么用的(我也知道看书很枯燥呜呜…)
最后还有一个啦!我的千玺好看吗哈哈哈哈 哈哈哈哈…这系列练习要用多张图片的时候懒得找,就直接用电脑里的handsome千玺了嘻嘻。