Y_Mathison 2017-04-07 11:51 采纳率: 25%
浏览 933

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

 <!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条回答 默认 最新

  • Go 旅城通票 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;
    });
    评论

报告相同问题？

悬赏问题

  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 matlab有关常微分方程的问题求解决，来真人，不要ai！
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？
  • ¥100 求三轴之间相互配合画圆以及直线的算法