html+css+js实现照相墙+背景改变

当鼠标移动到相册的某张相片时，背景随之改变:

这里主要讲改变背景的关键代码:

关键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;
}
View Code

 

关键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>
View Code

 

关键JS代码:【关于使用class来获取的省略，还没调试，重点看最简单的方法，贴出代码】

//加载背景图片的方法【方法二，实验成功】
function loadBg(mok){
        //获取src的值
        var val = mok.src;
        document.body.style.backgroundImage="url("+val+")";
        document.body.style.backgroundRepeat="no-repeat";
}
View Code

 

也就是贴上面的代码即可实现，如果想要测试其他的一种方法，可以自行复制下面的代码进行修改。

完整代码：

<!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>
posted @ 2020-02-29 22:27  CiscoLee  阅读(793)  评论(0)  编辑  收藏  举报