制作一个在页面任意位置的网页小广告图

大家好我是山河,今天我带给大家一个HTML5+CSS3+Javascript的小案例

制作一个网页广告图,其实很简单,网页广告图在各大购物网站,门户网站等都容易见到,有大广告也有小广告。

那些网站一打开就会自动显示广告,但是又给了一个 × 按钮

那么该如何制作呢

话不多说,上代码

<div class="banner">
	<p id="btn" title="点我关闭广告">×</p>
	<img src="images/banner.png" alt="广告图"/>
	<!--广告图的路径位置-->
</div>

//样式文件我就不写了,你们需要在哪个位置就自己调,如果需要覆盖其他元素上面,用相对定位 position: relative;

// 山河web 

//下面是JS代码

<script>
	//绑定元素
	var btn = document.getElementById('btn');
	var imgs = document.querySelector('.banner');
        //这个banner就是那个div里的类
			
	//点击事件触发匿名函数
	btn.onclick = function(){
	//修改元素的样式为不会显示
	/*
	 * display:none 隐藏元素,不占实际空间。
	 */
	imgs.style.display = 'none';
	}
			
</script>

看了代码之后是不是觉得很简单?

确实如此,简单的代码达到最极致的效果。

最后认识一下:

哔哩哔哩: https://space.bilibili.com/442772630 up主:山河web    UID:442772630