Permítanme compartir un pequeño caso completado después del autoaprendizaje. La vista previa es la siguiente:
Tenga en cuenta aquí que el anuncio de la derecha tiene dos funciones: (1) siga la ventana actual para moverse (2) haga clic en el botón de cruz en la parte superior derecha esquina para cerrar el anuncio
El código es el siguiente:
Temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登入</title>
<link rel="stylesheet" href="Temp.css">
</head>
<body>
<div id="box1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li><br>
<li></li>
<li></li>
<li></li>
<li></li><br>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 测试让广告滚动 -->
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
<li>Test8</li>
<li>Test9</li>
<li>Test10</li>
<li>Test11</li>
<li>Test12</li>
<li>Test13</li>
<li>Test14</li>
<li>Test15</li>
<li>Test16</li>
<li>Test17</li>
<li>Test18</li>
<li>Test19</li>
<li>Test20</li>
<li>Test21</li>
<li>Test22</li>
<li>Test23</li>
<li>Test24</li>
<li>Test25</li>
<li>Test26</li>
<li>Test27</li>
<li>Test28</li>
<li>Test29</li>
<li>Test30</li>
<li>Test31</li>
<li>Test32</li>
<li>Test33</li>
<li>Test34</li>
<li>Test35</li>
<li>Test36</li>
<li>Test37</li>
<li>Test38</li>
<li>Test39</li>
<li>Test40</li>
<li>Test41</li>
<li>Test42</li>
<li>Test43</li>
<li>Test44</li>
<li>Test45</li>
<li>Test46</li>
<li>Test47</li>
<li>Test48</li>
<li>Test49</li>
<li>Test50</li>
<li>Test51</li>
<li>Test52</li>
<li>Test53</li>
<li>Test54</li>
<li>Test55</li>
<li>Test56</li>
<li>Test57</li>
<li>Test58</li>
<li>Test59</li>
<li>Test60</li>
<li>Test61</li>
<li>Test62</li>
<li>Test63</li>
<li>Test64</li>
<li>Test65</li>
<li>Test66</li>
<li>Test67</li>
<li>Test68</li>
<li>Test69</li>
<li>Test70</li>
<li>Test71</li>
<li>Test72</li>
<li>Test73</li>
<li>Test74</li>
<li>Test75</li>
<li>Test76</li>
<li>Test77</li>
<li>Test78</li>
<li>Test79</li>
<li>Test80</li>
<li>Test81</li>
<li>Test82</li>
<li>Test83</li>
<li>Test84</li>
<li>Test85</li>
<li>Test86</li>
<li>Test87</li>
<li>Test88</li>
<li>Test89</li>
<li>Test90</li>
<li>Test91</li>
<li>Test92</li>
<li>Test93</li>
<li>Test94</li>
<li>Test95</li>
<li>Test96</li>
<li>Test97</li>
<li>Test98</li>
<li>Test99</li>
<li>Test100</li>
</ul>
<img id='AD1' src="pic/AD1.jpg" alt="广告">
<img id='close1' src="pic/关闭.png" alt="关闭">
<script src="Temp.js"></script>
</body>
</html>
Temp.css
#AD1 {
/* 让广告跟着窗口同步移动 */
position: fixed;
right: 0;
top: 100px;
height: 200px;
}
#close1 {
/* 叉号也需要跟着窗口同步移动 */
position: fixed;
right: 0;
top: 100px;
height: 20px;
background-color:rgba(46, 47, 46, 0.4);
}
#box1 li {
list-style: none;
display: inline-block;
height: 24px;
width: 24px;
margin:10px 10px;
background-image: url(pic/淘宝精灵图.png);
background-repeat: no-repeat;
border: 1px solid;
}
Temp.js
//为侧边广告添加删除事件
var ad1=document.getElementById('AD1');
var close1=document.getElementById('close1');
close1.onclick=function(){
ad1.style.display='none';
close1.style.display='none';
}
//淘宝精灵图
// 假设显示区域是一个窗口,那么窗口最开始是在精灵图的左上角顶点处(x=0,y=0),
// 这里精灵图是竖条,只需要调整垂直坐标y,负值是因为是精灵图移动而不是窗口移动
var box1=document.querySelectorAll("#box1 li");
for(let i=0;i<box1.length;i++){
let temp=-44;
temp*=i;
box1[i].style.backgroundPosition='0 '+temp+'px';
}
ejercicio de posición de fondo: cómo usar píxeles para colocar el
material de sprite de la imagen de fondo: