精灵图和窗口右侧广告案例

vastSky0

已于 2023-02-02 11:10:21 修改

阅读量68

点赞数

分类专栏：前端文章标签： javascript css 前端

于 2023-02-02 11:00:12 首次发布

本文链接：https://blog.csdn.net/NEXT00/article/details/128846403

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

分享一下自学后完成的一个小案例，预览图如下：
在这里插入图片描述
这里注意右侧广告具备两个功能：（1）跟随当前窗口移动（2）点击右上角叉按钮可以关闭广告

代码如下：
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';
}