移动应用开发（4）--页面侧边的垃圾广告(javascript,jQuery)

最新推荐文章于 2022-02-03 23:44:10 发布

原创最新推荐文章于 2022-02-03 23:44:10 发布 · 295 阅读

1 ·

CC 4.0 BY-SA版权

移动应用开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍使用JavaScript和jQuery实现视频及图片广告弹窗的方法，包括浮动广告层、关闭按钮功能及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.分别用JavaScript和jQuery实现视频广告和图片广告弹窗操作。

2.广告层浮于最上层，点击“点击关闭”链接到贪玩蓝月官网（垃圾广告都是这种骚操作23333），点击旁边“×”关闭广告。

实现图片和视频分布两侧css样式

<style type="text/css">
	#gg{
		z-index:999;
		position:fixed;
		width:180px;
		height:300px;
		display:block;
		top:120px;
		left:20px;
	}
	#gg2{
		z-index:999;
		position:fixed;
		width:180px;
		height:300px;
		display:block;
		top:120px;
		right:20px;
	}
</style>

z-index:设置元素的堆叠顺序,999位于页面最上层；

position:fixed;位置可移动，使其能随页面滚动而滑动；

left/right:左右两边各留出20px距离。

插入视频和图片的HTML5代码

<div id="gg">
    	<div id="zzh">
        		<a href="http://lanyue.tanwan.com"><b>点击关闭</b></a>
                <a href="#"><b onclick="closeVideo()">×</b></a>
                <a hred="http://lanyue.tanwan.com">
                    <video width="320" height="240" autoplay="autoplay" loop="loop" id="video">
                    <source src="zzh.mp4" type="video/mp4" />
                    <object data="movie.mp4" width="320" height="240">
                    <embed src="movie.swf" width="320" height="240" />
                    </object>
                    </video>
 				</a>
        </div>
    </div>
    <div id="gg2">
    	<div id="zzh2">
        		<a href="http://lanyue.tanwan.com"><b>点击关闭</b></a>
                <a href="#"><b onclick="closeAd('gg2')">×</b></a>
                <a hred="http://lanyue.tanwan.com"><img src="image/timg.jpg" /></a>
        </div>
    </div>

JavaScript代码如下

<script type="text/javascript">
	function test(){
			var name = document.getElementById("name").value;
			var pwd = document.getElementById("pwd").value;
			var isflag = false;
			if(name=="123"&&pwd=="123"){
				isflag = true;
			}
			return isflag;
		}
	function closeAd(adId){
		document.getElementById(adId).style.display="none";
	}
	function closeVideo(){
		document.getElementById("gg").style.display="none";
		var myVideo=document.getElementById("video");
		myVideo.currentTime = 0;
		myVideo.pause();
	}
</script>

在这里，有一个小问题。因为在<body>中对视频设置的是自动播放以及循环播放（autoplay,loop),在js代码中就要注意，关闭窗口时，应同时停止播放视频。

一开始用document.getElementById("video").style.pause();并不能使视频停止播放；故换成以下代码：
       var myVideo=document.getElementById("video");
       myVideo.currentTime = 0;
       myVideo.pause();

私以为，以上问题的出现是不是因为pause()函数适用范围？

此部分可参考w3cschool中html音频/视频部分

jQuery改写JavaScript代码部分：

	$(document).ready(function(){
		$("#b1").click(function(){
			$("#gg").hide();
			//关闭窗口，停止音频播放
			$("#vidoe").pause();
		});
	});
	$(document).ready(function(){
		$("#b2").click(function(){
			$("#gg2").hide();
		});
	});