html/css/javascript您现在的位置是:主页 > html/css/javascript >
分享一个网站顶部Banner广告定时收缩效果
2023-04-26 17:50:34html/css/javascript 59人已围观
打开网站默认展开一个大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后查看效果。
联系微信
扫码联系技术微信
---------------专业解决网站各种疑难杂症,可淘宝担保交易,安全无风险---------------
建站、仿站、二次开发、网站改版、网站修改、网站漏洞修复、网站被黑修复、网站安全、服务器安全等
点击了解更多 >>
相关文章
随机图文
怎么才能防止pbootcms模板被复制
pbootcms的模板目录默认是/template/default/html/ 如果您没有修改过这个目录,那么辛辛苦苦做好的模板很有可能会被别人复制走。 下边我们介绍下怎么才能防止pbootcms模板被复制: 一,修改模板子目录,修改掉默认的html子目录就好(记得是字母,勿用汉字及特殊字符)。 二,将网站的图片,css,js等文件移出模板pbootcms自定义表单添加IP地址显示
pbootcms默认自定义表单不能获取用户IP地址,现需要获取下用户的IP地址一项。那么我们可以直接拿留言功能代码进行改造。 效果截图 修改方法 一,新增自定义表单字段如下图 二,修改/apps/home/controller/FormController.php 找到代码 $data['crecss让a标签超链接失效的代码
一行css就可以让超链接失效,将此代码加在控制a链接样式代码块中即可。 pointer-events: none;pbootcms在阿里云虚拟主机上验证码不显示的原因?
问题描述: pbootcms使用阿里云主机登录网站后台验证码不显示,具体情况如下图所示。 解决办法: 这种情况需要去主机面板里设置开启php.ini的输出缓冲区数据,如图: