当鼠标移动到相册的某张相片时，背景随之改变:
这里主要讲改变背景的关键代码:
关键CSS代码1:
* { margin: 0; padding: 0; } body{ background-size:100%; } .box{ width: 1000px; margin: 0px auto; margin-top: 100px; } .box img { width: 320px; height: 180px; border: 5px solid azure; box-shadow: -10px -10px 10px black; transition: all 0.3s linear; } img:nth-child(odd) { transform: rotate(20deg); } img:nth-child(even) { transform: rotate(-20deg); } img:hover { transform: scale(1.3); position: relative; z-index: 2; }
关键html代码:【重点在onmouseover="loadBg(this)"，class="img"的方法还没调试修改完成】
<div class="box"> <img src="./../../正面.jpg" onmouseover="loadBg(this)"> <img src="./../../反面.jpg" onmouseover="loadBg(this)"> <img src="./../../xuanjiezhimou.jpg" onmouseover="loadBg(this)"> <img src="./../../码上说故事_690.jpeg" onmouseover="loadBg(this)"> <img src="./../../1.jpg" onmouseover="loadBg(this)"> <img src="./../../反面.jpg" onmouseover="loadBg(this)"> <img src="./../../正面.jpg" onmouseover="loadBg(this)"> <img src="./../../沧海一声笑.PNG" onmouseover="loadBg(this)"> <img src="./../../xuanjiezhimou.jpg" onmouseover="loadBg(this)"> </div>
关键JS代码:【关于使用class来获取的省略，还没调试，重点看最简单的方法，贴出代码】
//加载背景图片的方法【方法二，实验成功】 function loadBg(mok){ //获取src的值 var val = mok.src; document.body.style.backgroundImage="url("+val+")"; document.body.style.backgroundRepeat="no-repeat"; }
也就是贴上面的代码即可实现，如果想要测试其他的一种方法，可以自行复制下面的代码进行修改。
完整代码：
<!doctype html> <html> <head> <meat charset="utf-8"/> <title>照片墙</title> <style type="text/css"> * { margin: 0; padding: 0; } body{ background-size:100%; } .box{ width: 1000px; margin: 0px auto; margin-top: 100px; } .box img { width: 320px; height: 180px; border: 5px solid azure; box-shadow: -10px -10px 10px black; transition: all 0.3s linear; } img:nth-child(odd) { transform: rotate(20deg); } img:nth-child(even) { transform: rotate(-20deg); } img:hover { transform: scale(1.3); position: relative; z-index: 2; } </style> </head> <body> <div class="box" id="box"> <img src="./../../正面.jpg" class="img" onmouseover="loadBg(this)"> <img src="./../../反面.jpg" class="img" onmouseover="loadBg(this)"> <img src="./../../xuanjiezhimou.jpg" class="img" onmouseover="loadBg(this)"> <img src="./../../码上说故事_690.jpeg" class="img" onmouseover="loadBg(this)"> <img src="./../../1.jpg" class="img" onmouseover="loadBg(this)"> <img src="./../../反面.jpg" class="img" onmouseover="loadBg(this)"> <img src="./../../正面.jpg" class="img" onmouseover="loadBg(this)"> <img src="./../../沧海一声笑.PNG" class="img" onmouseover="loadBg(this)"> <img src="./../../xuanjiezhimou.jpg" class="img" onmouseover="loadBg(this)"> </div> </body> </html> <!-- 使用js实现当鼠标移到对应的照片上时，背景变成这张照片 --> <script type="text/javascript"> //获取某元素所有子元素的方法 function getByClass(oParent, sClass){ var aResult=[]; var aEle=oParent.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){ if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } /** 加载背景图片的方法 onload="loag(Bg)"放在body标签【方法一，实现失败，有时间再研究研究】 function loadBg(){ //获取对应img的src的值 var box=document.getElementById('box'); var img=getByClass(box, 'img'); for(var i=0;i<img.length;i++){ //获取src的值 var val = img[i].src; //alert(img[i].src); //当鼠标移动到该图片上时，触发事件 //将src的值加入body的backgroundImage img[i].onmouseover = function(){ document.body.style.backgroundImage="url("+val+")"; console.log(val); } } } **/ //加载背景图片的方法【方法二，实验成功】 function loadBg(mok){ //获取src的值 var val = mok.src; document.body.style.backgroundImage="url("+val+")"; document.body.style.backgroundRepeat="no-repeat"; } </script>