淘宝小广告的鼠标移上实现html， JavaScript代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝小广告</title>
    <style>
        *{
            border:0px;
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #box{
            width: 500px;
            height: 500px;
            border: 2px solid rgb(172, 171, 171);
            margin: 50px auto;
            overflow: hidden;
            //url(./picture/house.jpg) no-repeat改成你要显示的图片或者背景颜色
            background: url(./picture/house.jpg) no-repeat;
        }
        ul{
            overflow: hidden;
            border-top: 2px solid rgb(172, 171, 171);
            margin-top: 400px;
        }
        li{
            float: left;
            height:100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>//将“uel()”的内容改成你本地电脑的图片链接或者改成背景颜色
            <li id="li01" onmouseover='fn("box","li01","url(./picture/house.jpg) no-repeat")'><img src="./picture/house.jpg"></li>
            <li id="li02" onmouseover='fn("box","li02","url(./picture/线稿.jpg ) no-repeat")'><img src="./picture/线稿.jpg" ></li>
            <li id="li03" onmouseover='fn("box","li03","url(./picture/线稿2.jpg)no-repeat")'><img src="./picture/线稿2.jpg"></li>
            <li id="li04" onmouseover='fn("box","li04","url(./picture/漫画.jpg) no-repeat")'><img src="./picture/漫画.jpg"></li>
            <li id="li05" onmouseover='fn("box","li05","url(./picture/house.jpg) no-repeat")'><img src="./picture/house.jpg"></li>
        </ul>
    </div>
    <script>
        function fn(box,li,bg){
            let oBox=document.getElementById(box);
            let oLi=document.getElementById(li);
           oBox.style.background=bg;
        }
    </script>
</body>
</html>
posted @ 2020-07-15 20:35  zayyo  阅读(174)  评论(0)    收藏  举报