zoukankan      html  css  js  c++  java
  • 麦包包全屏伸缩广告,全屏展开后可自动回到原始状态

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

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

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

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

    html代码如下:


    <DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: block" id=js_ads_banner_top>
    <A href="" target=_blank><IMG src="images/banner_s.jpg" width=960 height=70 border="0"></A>
    </DIV>

    <DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: none" id=js_ads_banner_top_slide>
     <A href="" target=_blank><IMG src="images/banner_b.jpg" width=960 height=400 border="0"></A>
    </DIV>


    其中,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

  • 相关阅读:
    ES6 Syntax and Feature Overview
    Javescript——数据类型
    Javescript——变量声明的区别
    React之概述(待续)
    React之简介
    Vue.js学习之简介(待续)
    Build Telemetry for Distributed Services之OpenCensus:Tracing2(待续)
    docker之redis使用
    Build Telemetry for Distributed Services之OpenCensus:C#
    Build Telemetry for Distributed Services之Open Telemetry简介
  • 原文地址:https://www.cnblogs.com/chenguiya/p/3202407.html
Copyright © 2011-2022 走看看