zoukankan      html  css  js  c++  java
  • 页面弹出层首屏图需求

    一、弹出层:

    需求:打开网页,先弹出一张图片,5秒钟之后自动关闭图片进入网页;用户也可以通过点击按钮来关闭图片进入网页;

    原理:通过不同层级定位的方式让弹出的图片显示在网页所有元素上面(也就是让这张推按覆盖在网页原先的元素上)。然后通过jquery或JS动作,设置图片定时隐藏。

    代码:

    <div id="pagephoto" style="opacity:0;filter:alpha(opacity=100);position:fixed;_position:absolute; left:0; top:0; right:0; bottom:0; z-index:9999; text-align:center;*height:expression(((document.documentElement.clientHeight>0)?document.documentElement.clientHeight:document.documentElement.clientHeight)+'px');*100%;_top:expression((document.documentElement.scrollTop-this.offsetHeight+this.offsetHeight)+'px');">
    <div style="position:absolute; left:0; top:0; right:0; bottom:0; background:#000;" onClick="$('#pagephoto').slideUp('slow')"></div>
    <div style=" display:inline-block;*display:inline; 1px; height:100%; margin:0 -0.5em 0 -1px; position:relative; vertical-align:middle;"></div>
    <a href="http://www.test.com/index.php/detail/cx-4/121#main" target="_blank"><img src="http://www.test.com/data/template/test/images/index/show_cx4.jpg" style="max-100%; max-height:100%; vertical-align:middle; position:relative;"></a>
    </div>
    
    <script>
    $(function(){
    setTimeout("$('#pagephoto').animate({opacity:'1'},'slow')",300);
    setTimeout("$('#pagephoto').hide(function () { $('#pagephoto').animate({top:'-100%',opacity:'0'},'slow')})",5000);
    });
    </script>



    setTimeout:定时器.设定一个时间,然后关系相应的程序。
    animate:动画


    二、锚点


    Demo:

    $(function(){
    if (window.location.hash=="#main") {
    setTimeout("$('body').animate({'scrollTop':$('.m-global-container').offset().top},500);",1000);
    //alert($("body").scrollTop());
    }; 
    });
  • 相关阅读:
    Jquery日历插件e-calendar升级版
    jquery双击事件(dblclick)时,不触发单击事件(click)
    js实现的点击div区域外隐藏div区域
    IE浏览器new Date()带参返回NaN解决方法
    RequireJs中使用layer的问题
    AngularJs规范
    js调用Angular的方法
    游标cursor
    bigint数据类型
    ANSI_NULLS和QUOTED_IDENTIFIER
  • 原文地址:https://www.cnblogs.com/victor5230/p/5795665.html
Copyright © 2011-2022 走看看