麦包包全屏伸缩广告，全屏展开后可自动回到原始状态

首先，打开页面时候，页面展示给别人的是一个小型广告图：如图：

过了三秒之后，页面自动展开一个从隐藏到可见的大广告图，如图：

在过三秒钟，大广告图由可见到隐藏，小广告图由隐藏到可见的过程，小广告图显示之后就一直会显示一段时间：如图：

这种效果相对是一些网站的首页如果要弄一个活动显示的话，就会再网站的首页头顶部位显示这样的效果是非常不错的，：

html代码如下：

其中，Javascript的代码如下：

//顶部伸展广告
if ($("#js_ads_banner_top_slide").length){
var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");
setTimeout(function(){$bannertop.slideUp(1000);$slidebannertop.slideDown(1000);},2500);
setTimeout(function(){$slidebannertop.slideUp(1000,function (){$bannertop.slideDown(1000);});},8500);
}

其中，slideDown方法是在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度，

另外，slideUp方法是在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动的效果）

然后，slideUp(speed,[callback]):

speed(string,Number):三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数（如：1000）

callback(Function):(可选)在动画完成时执行的函数

文件下载分享的网址是：http://yunpan.cn/QtaeMcCUGMYRM

转载于:https://www.cnblogs.com/chenguiya/p/3202407.html

麦包包全屏伸缩广告，全屏展开后可自动回到原始状态相关推荐

android无法自动旋屏,Android 手动设置屏幕方向后不能自动转屏问题
如题,Android在手动设置屏幕方向后不能使用自动转屏了,这是因为手动设置屏幕方向如: setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATIO ...
html 飘浮移动广告层,JS全屏漂浮广告、移入光标停止移动
本节内容: JS全屏漂浮广告例子: 复制代码代码示例: JS全屏漂浮广告-www.jquerycn.cn div#roll{width:100px;height:100px; background ...
学做全屏浮动广告 JS 原生代码
<!DOCTYPE HTML> <html><head><title>JS全屏漂浮广告</title> <meta http-equi ...
js实现全屏漂浮广告可关闭
<!DOCTYPE HTML> <html lang="en"><head><meta http-equiv="Content- ...
Js广告_全屏漂浮广告效果
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Conten ...
php js漂浮,基于javascript实现全屏漂浮广告_javascript技巧
本文实例为大家分享javascript实现全屏漂浮广告,供大家参考,具体内容如下主要使用方法网页可见区域宽:document.body.clientWidth; 网页可见区域高:document. ...
html全屏漂浮,jquery全屏漂浮广告插件，可点击关闭(原创)
jquery全屏漂浮广告插件兼容主流浏览器实现简单调用简单在线预览源码下载 jquery全屏漂浮广告插件兼容主流浏览器实现非常简单说明:jquery在1.9开始不支持.live()方法 ...
ensp启动设备蓝屏_超全超详细的电脑蓝屏问题解决方案汇总
生活太难了!每天搬砖已经够不容易,电脑还作妖: 设计图还差最后一个图层,蓝屏了!!财务工资表格马上统计完,蓝屏了?!熬了一宿马上写完1万字稿件,蓝屏了- 今天,我就带大家轻松搞定蓝屏. 什么是蓝屏蓝 ...
vue 全屏与退出全屏
vue 全屏与退出全屏实现点击展开全屏或退出全屏首先,安装 npm i screenfull@5 -S 然后在对应组件页面引入screenfull使用 <template><di ...

麦包包全屏伸缩广告，全屏展开后可自动回到原始状态

麦包包全屏伸缩广告，全屏展开后可自动回到原始状态相关推荐

最新文章

热门文章