作业要求：
效果：
总结：
1、让元素上下对齐的方法：
①让图片上下对齐用vertical-align:cender;
②让其他元素上下对齐设置line-height与height一样。
2、CSS中设置颜色为#fff时，而这个样式在JS中则是用字符串"rgb(255, 255, 255)"存储的，我判断是否被选中就是判断边框颜色来筛选选中的图片的，代码如下：
if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){
}
3、
/* ★★★这个border一定设置，因为移动时子元素会从继承#d1的样式，变为继承#d3的样式，所以要单独设置一下★★★ */
#d3 img{
border: 5px solid #fff;
}
移动图片从左DIV到右DIV中，如没有设置右DIV边框颜色，会默认继承为黑色边框，所以要单独设置。
4、注意三目运算符参数2，3中不要出现分号";"，否则会报错
5、背景图片定位-css切背景图片background-position
https://www.cnblogs.com/wangrongxiang/p/5283034.html
6、==removeChild()==会返回被删除的结点实现
7、实现图片在DIV之间的移动【关键步骤】：
方法一：
//以下两种都可行 Node.removeChild()经测试，这个Node可以是对象数组，也可以是父元素对象
newImgDom = srcDidDom.removeChild(imgsDoms[i]);
// newImgDom = imgsDoms.removeChild(imgsDoms[i]);
方法二：
//利用Node.cloneNode()实现
var newImgDom = imgsDoms[i].cloneNode();
imgsDoms[i].remove();
//因为removeChild()会返回被删除的结点，所以也可以实现
targetDivDom.appendChild(newImgDom);
注意不能使用以下方法：（能否使用addEventListener？？？有待考证）
// var newImgDom = document.createElement("img");
// // newImgDom.src = imgsDoms[i].src;
// //也可以克隆cloneNode()，事件无法这样赋值
// // newImgDom.onclick = "chooseImg(this)";
// // newImgDom.style.border = "5px solid #fff";
// // targetDivDom.appendChild(newImgDom);
// // imgsDoms[i].remove();
8、两个箭头的点击事件其实可以用一个函数实现，只不过source和target的位置需要交换一下。
代码（最好下载，因为有6张图片）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
text-align: center;
border: 1px solid #000;
}
#b-box div{
display: inline-block;
}
#d1,#d3{
width: 699px;
height: 800px;
/* 对齐的好办法，还有一个是试试line-height相等 */
vertical-align: top;
}
#d2{
height: 800px;
width: 80px;
}
#rmBtn,#lmBtn{
width: 67px;
height: 60px;
background: url(arrows.jpg);
background-repeat: no-repeat;
background-size: 132px 58px;
cursor: pointer;
display: block;
margin: 180px auto;
}
#lmBtn{
background-position: -68px 0px;
}
#d1 img{
/* 这种#fff存储时是"rgb(255, 255, 255)" */
border: 5px solid #fff;
}
/* ★★★这个border一定设置，因为移动时子元素会从继承#d1的样式，变为继承#d3的样式，所以要单独设置一下★★★ */
#d3 img{
border: 5px solid #fff;
}
</style>
</head>
<body>
<div id="b-box">
<div id="d1">
<img src="img-0.jpg" onclick="chooseImg(this)">
<img src="img-1.jpg" onclick="chooseImg(this)">
<img src="img-2.jpg" onclick="chooseImg(this)">
<img src="img-3.jpg" onclick="chooseImg(this)">
<img src="img-4.jpg" onclick="chooseImg(this)">
<img src="img-5.jpg" onclick="chooseImg(this)">
</div>
<div id="d2">
<input type="button" name="" id="rmBtn" value="" onclick="Move('d1', 'd3')"/>
<input type="button" name="" id="lmBtn" value="" onclick="Move('d3', 'd1')"/>
</div>
<div id="d3">
</div>
<script type="text/javascript">
function chooseImg(img){
//★★★注意颜色这玩意儿★★★注意三目运算符表达式2，3不要加分号“;”★★★
img.style.borderColor == "rgb(0, 0, 0)" ? img.style.borderColor = "#fff" : img.style.borderColor = "#000";
// 边框宽度5px被继承了，img.style.borderWidth = "5px";
//这个宽度虽然被继承了，但是在将其移动到#d3中后，又会继承#d3的边框样式
}
//利用removeChild()会返回被删除的结点实现
function Move(source,target){
var srcDidDom = document.getElementById(source);
var imgsDoms = document.querySelectorAll("#" + source + " img[onclick = 'chooseImg(this)']");
var targetDivDom = document.getElementById(target);
for(var i = 0; i < imgsDoms.length; i++){
if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){
//以下两种都可行 Node.removeChild()经测试，这个Node可以是对象数组，也可以是父元素对象
newImgDom = srcDidDom.removeChild(imgsDoms[i]);
// newImgDom = imgsDoms.removeChild(imgsDoms[i]);
targetDivDom.appendChild(newImgDom);
newImgDom.style.borderColor = "rgb(255, 255, 255)"
}
}
}
//优化，合并函数
function Move(source,target){
var imgsDoms = document.querySelectorAll("#" + source + " img[onclick = 'chooseImg(this)']");
var targetDivDom = document.getElementById(target);
for(var i = 0; i < imgsDoms.length; i++){
if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){
//利用Node.cloneNode()实现
var newImgDom = imgsDoms[i].cloneNode();
imgsDoms[i].remove();
//因为removeChild()会返回被删除的结点，所以也可以实现
targetDivDom.appendChild(newImgDom);
newImgDom.style.borderColor = "rgb(255, 255, 255)"
}
}
}
// //优化，合并函数
// function Move(source,target){
// var imgsDoms = document.querySelectorAll("#" + source + " img[onclick = 'chooseImg(this)']");
// var targetDivDom = document.getElementById(target);
// for(var i = 0; i < imgsDoms.length; i++){
// if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){
// targetDivDom.appendChild(imgsDoms[i]);
// imgsDoms[i].style.borderColor = "rgb(255, 255, 255)"
// }
// }
// }
// function rightMove(){
// var imgsDoms = document.querySelectorAll("#d1 img[onclick = 'chooseImg(this)']");
// // var imgs = document.querySelectorAll("#d1 img[src*='jpg']");
// var targetDivDom = document.getElementById("d3");
// for(var i = 0; i < imgsDoms.length; i++){
// if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){
// //★★★直接利用appendChild()移动本体或者cloneNode()克隆一份，现在无法自己克隆，事件不会克隆★★★
// targetDivDom.appendChild(imgsDoms[i]);
// imgsDoms[i].style.borderColor = "rgb(255, 255, 255)";
// // var newImgDom = document.createElement("img");
// // newImgDom.src = imgsDoms[i].src;
// //也可以克隆cloneNode()，事件无法这样赋值
// // newImgDom.onclick = "chooseImg(this)";
// // newImgDom.style.border = "5px solid #fff";
// // targetDivDom.appendChild(newImgDom);
// // imgsDoms[i].remove();
// }
// }
// }
// function leftMove(){
// var imgsDoms = document.querySelectorAll("#d3 img[onclick = 'chooseImg(this)']");
// var targetDivDom = document.getElementById("d1");
// for(var i = 0; i < imgsDoms.length; i++){
// if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){
// targetDivDom.appendChild(imgsDoms[i]);
// imgsDoms[i].style.borderColor = "rgb(255, 255, 255)"
// }
// }
// }
</script>
</div>
</body>
</html>
2570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
