作业要求：

效果：

总结：

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>

DOM练习2文件：

https://download.csdn.net/download/cc2855816075/81172756

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结相关推荐

【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置带注释/总结
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选带注释/总结
作业要求: 效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结
效果: 总结: 1.event.target和this似乎一致,自行查阅. 2.绑定事件方法:在带有括号(需要传参)时,一定要在外面带上引号,因为不加引号的话意为直接调用函数. <input t ...
使用JS操作CSS实现JS改变背景图片
使用JS操作CSS实现JS改变背景图片在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变d ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
前端入门之——javascript day8 DOM对象(DHTML)
DOM对象(DHTML) 7.1 什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平 ...
微信对话生成源码前端-html+css+javascript
本文介绍一个微信生成器,完全利用前端做出来的. 技术介绍: html+css+javascript 运行截图: 外观设置: 对话设置: 右侧的图片可以下载保存到自己电脑上. 功能如截图所示:更换头像. ...

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结

作业要求：

效果：

总结：

代码（最好下载，因为有6张图片）：

DOM练习2文件：

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结相关推荐

最新文章

热门文章

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐 带注释/总结

作业要求：

效果：

总结：

代码（最好下载，因为有6张图片）：

DOM练习2文件：

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐 带注释/总结相关推荐

最新文章

热门文章

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结

【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结相关推荐