sinat_28228747
Y_Mathison
采纳率25%
2017-04-07 11:51 阅读 930

怎么在它进度条宽度增加完毕后,弹出网页?

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
body {
  background: #161616 url(pattern_40.gif) top left repeat;
  margin: 0;
  padding: 0;
  font: 12px normal Verdana, Arial, Helvetica, sans-serif;
  height: 100%;
}
#content { 
  width:100%; 
  height:10px; 
  position:absolute;
  top:75%;
  margin:50px auto; 
  background:#000;
}
/*  进度条样式  */
.fullwidth .expand { 
  width:100%; 
  height:10px; 
  margin:2px 0; 
  background:#2187e7; 
  position:absolute;
  box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);/*进度条阴影*/
    -moz-animation:fullexpand 10s ease-out;
  -webkit-animation:fullexpand 10s ease-out;
}
/*  进度条速度 */
@-webkit-keyframes fullexpand {
  0%  { width:0px;}
  100%{ width:100%;}  
<!-- } -->

/*  按钮 */
.trigger, .triggerFull, .triggerBar {
  background: #000000;
  background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
  background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
  border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.8em;
  text-decoration: none;
  text-transform: lowercase;
  text-align: center;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
 <!-- // display: block; -->
  margin: 0 auto;
  width: 140px;
    position:absolute;
  top:500px;
  left:50%;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script>    
$(document).ready(function() {

    $('.triggerFull').click(function() {
     $('#content').removeClass('fullwidth').delay(5).queue(function(next){
        $(this).addClass('fullwidth');
         next();
        <!-- while(fullexpand.width==100%) -->
        <!-- window.location.href="http://news.qq.com"; -->

        });

        //

        return false;

    });
});

</script>
<link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html" />
</head>
<body>
<div class="container">
</div>
<div id="content">
<span class="expand"></span>
</div>
<a class="triggerFull" href="#">Start/Restart Animation</a>
</body>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • showbo GoCityPass新加坡曼谷通票 2017-04-07 12:59
         $('.triggerFull').click(function() {
         $('#content').removeClass('fullwidth').delay(5).queue(function(next){
             $(this).addClass('fullwidth');
             next();
             setTimeout(function () { window.location.href = "http://news.qq.com"; }, 10000);///你的动画就10s,所以计时器10s后启动跳转就行了
    
            });
            return false;
        });
    
    点赞 评论 复制链接分享

相关推荐