带有ProgressBar + fadeIn + fadeOut + OnTimer + Redirect的Fancybox

时间:2017-01-23 21:54:47

标签: javascript jquery redirect fancybox overlay

以下代码功能是我之后的

OnClick = FancyBox(image),FadeIn,FadeOut,Timer & Download + Time = Redirect

我的目标是设置一个功能FancyBox,将onclick设置为fadeIn(time)>显示"进度条/ .gif图像"并fadeOut(time)启动下载,然后重定向(时间)到新页面。重定向的计时器将是一个很棒的特权,但如果不可能,那就没问题。

<style>
#overlay {
background:#EAE8E8;
  position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 20%;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.50;
    filter: alpha(opacity=50);
    Font-Size:150%;
}

<div id="overlay">
<img src="http://de.speedmaxpc.com/wp-content/uploads/2017/01/120px-Gray_circles_rotate.gif" alt="Loading" />

正在加载......

   <script>
   jQuery(window).load(function(){
   $("#overlay").fadeTo(3000,1).fadeOut(3000);
 });
  </script>

我是否将重定向和时间码添加到上面的功能脚本中,或者将其保存在我页面的标题中?

  <script type="text/javascript" language="JavaScript">
    function SetUpRedirect() {
     var destination = "http://website.com";
      setTimeout("window.location='"+destination+"'",1000);
     return true;
      }
     </script>    

  <a class="yip" onclick="SetUpRedirect();" href="#"  rel="">click</a>


<a class="yip" onclick="SetUpRedirect();" href="#"  rel="">click</a>

0 个答案:

没有答案