zoukankan      html  css  js  c++  java
  • jquery-新人引导练习

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新人引导</title>
    <style>
    *{ margin:0; padding:0}
    html{ height:100%}
    html.noScrollBar{100%;height:100%;overflow: hidden;}
    body{height:100%}
    #mask{ height:100%; 100%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none}
    #searchTip{ 980px; height:100%; margin:0 auto; position:absolute;top:0;left:50%;margin-left:-490px; display:none}
    #searchTip div{ position:absolute; display:none }
    #searchTip div a{ position:absolute;96px; height:32px; cursor:pointer; text-indent:-999px; overflow:hidden}
    #searchTip div span{cursor:pointer; position:absolute; 30px; height:30px;text-indent:-999px; overflow:hidden}
    .stepA{ background:url(images/guide11.png); height:329px; 745px; top:130px; left:-9px; display:block}
    .stepA a{top:230px; left:490px; }
    .stepA span{ top:143px; right:32px; }
    .stepB{ background:url(images/guide21.png); 647px; height:405px;top:2px; left:324px}
    .stepB a{top:308px; left:146px;}
    .stepB span{ top:196px; right:285px; }
    .stepC{ background:url(images/guide31.png); 654px; height:257px;top:294px; left:318px}
    .stepC a{top:155px; left:400px; }
    .stepC span{ top:44px; right:35px; }
    .stepD{ background:url(images/guide41.png); 558px; height:348px;top:78px; left:155px}
    .stepD a{top:246px; left:304px;}
    .stepD span{ top:135px; right:35px; }
    .stepE{ background:url(images/guide51.png); 397px; height:342px;top:79px; left:250px}
    .stepE a{top:245px; left:153px;}
    .imgs{margin:0 auto;980px;}
    .imgs div.one{background:url(images/body.png) center top;}
    </style>
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    </head>
    <body>
    <div class="imgs">
     <div class="one" style="height:1694px;980px;&nbsp;</div>
    </div>
    <div id="mask"></div>
    <div id="searchTip">
     <div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
        <div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
        <div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
        <div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
        <div class="stepE"><a>下一步</a></div>
    </div>
    </body>
    <script type="text/javascript">
    $(function(){
     var isCookie = false;
     var jqFun = function(){
      $('html').addClass('noScrollBar');
      $('#mask, #searchTip, #searchTip div:eq(0)').show();
      var hideFun = function(){
       $('#mask, #searchTip, #searchTip div:eq(0)').hide();
       $('html').removeClass('noScrollBar');   
      };  
      $('#searchTip a').each(function(item){
       $(this).click(function(){
        $(this).parent().hide().next().show();
       });
      });
      $('#searchTip span').each(function(){
       $(this).click(hideFun);
      });
      $('#searchTip div a:last').click(hideFun);
      setCookie();
     };

     // ADD COOKIE
     var setCookie = function(){
      var date = new Date();
      date.setDate(date.getDate() + 30);
      document.cookie = "name=sunhw;expires=" + date;  
     };
     //Get cookie
     var getCookie = function(){
      if(document.cookie.substring(5) != 'sunhw'){
       return isCookie = true;
      }
     };

     //is cookie
     if(getCookie()){
      jqFun();
     } 
     //jqFun();
    });
    </script>
    </html>

  • 相关阅读:
    边界值分析
    等价类划分
    手工检测SQL注入(安全性测试)
    Web安全性测试
    Jmeter使用流程及简单分析监控
    使用可视化工具redisclient连接redis
    Java ThreadLocal的使用
    jvm中的新生代Eden和survivor区
    策略模式和工厂模式的区别
    java将一数组乱序排列
  • 原文地址:https://www.cnblogs.com/sunhw360/p/4139815.html
Copyright © 2011-2022 走看看