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

分享一下自学后完成的一个小案例，预览图如下：

这里注意右侧广告具备两个功能：（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';
}

background-position练习：如何使用像素来定位背景图像
精灵图素材：

精灵图和窗口右侧广告案例相关推荐

本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
精灵图案例-拼出自己名字
精灵图案例-拼出自己名字 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
JS入门笔记九：循环精灵图案例
在开发中,精灵图往往是按照一定规律制作的,前端程序员往往可以借助其规律来快速制作相应的图标,提升开发效率. 操作步骤: 1.寻找精灵图的排布规律 2.按照规律改变背景位置以淘宝为例这是淘宝精灵图的 ...
CSS综合案例——用精灵图拼单词
要学会用fireworkes软件,精确测量给的图片里每个图案的大小和位置. 例子拼 pink 这个单词,在盒子里放这个图片的特定图案字母P.那么需要设置好盒子,并设定好到底要显示这个精灵图的哪个部位( ...
Web前端知识CSS（清浮动的方法、CSS精灵图、滑动门）
一.清浮动的方法清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
GNN通俗笔记：图神经网络在推荐/广告中的应用
原始视频:七月在线公开课<图神经网络在推荐广告场景中的应用>,课件可以打开视频页面下载分享老师:推荐吴老师,推荐/广告算法专家,曾任部门算法负责人,年薪....不低字幕校对:天保,全程 ...
17-CSS3 高级技巧精灵图字体图标滑动门
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...

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

精灵图和窗口右侧广告案例相关推荐

最新文章

热门文章