广告
广告
广告
html/css/javascript您现在的位置是：主页 > html/css/javascript >

分享一个网站顶部Banner广告定时收缩效果

2023-04-26 17:50:34html/css/javascript 360人已围观

打开网站默认展开一个大banner广告图片，几秒后大banner广告图片慢慢缩回隐藏，同时小banner广告图片慢慢展开固定到顶部。 

<!DOCTYPE html>
<html>
<head>
<title>顶部定时弹出广告后缩回演示代码</title>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showshipin(){$(".shipin").slideToggle(1000);}
function hideshipin(){$(".shipin").slideToggle(1000);}
function showhengfu(){$(".hengfu").slideToggle(2000);}
setTimeout("showshipin()",500);
setTimeout("hideshipin()",6000);
setTimeout("showhengfu()",7000);
</script>
<style>
*{margin:0;padding:0;}
.topbanner{text-align:center;}
.hengfu{display:none;}
.shipin{display:none;width:100%;}
.video-sign{max-height:700px;}
</style>
</head>
<body>
<div class="topbanner">
	<div class="hengfu">
		<img src="https://www.0536360.com/images/aliyun.jpg">
	</div>
	<div class="shipin">
		<!--可以是图片也可以是视频等等等-->
		<!--<img src="https://www.0536360.com/kindeditor/attached/image/20220205/20220205124852_41989.png">-->
		<video class="video-sign" loop="true" preload="load" muted="muted" autoplay>
			<source src="logo.mp4" type="video/mp4">
		</video>
	</div>
</div>
</body>
</html>
这里代码默认是打开网页展示一个mp4视频，6秒后视频隐藏，同时展开顶部小广告图片。

如果不需要视频的朋友可以把视频代码删除然后删除图片注释即可。

不明白效果的朋友可以复制以上代码保存为html后查看效果。

 


扫码添加技术微信【解决问题，仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS，精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接：企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症，您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易，安全无风险

上一篇：pbootcms邮件通知同时发送到多个邮箱

下一篇：对video标签设置隐藏下载功能，禁止右键另存为视频的操作

广告
广告

相关文章

栏目分类

本栏推荐

pbootcms全国多城市网点筛选查询插件 适用于经销商查询，分店查询，售后服务站查询
技术微信