实现的动画效果毕竟有限,论动画还得是css3,但有些css3动画是自动执行的而不是触发,css3虽然有延时执行动画的代码,但这个代码效果是死的,如何变成活的呢?就是本文要讲的。

实现全部代码如下:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>点击按钮在当前页面加载另一个页面的方法-综合应用-魏义齐个人博客</title> 
<script src="js/jquery-1.11.0.min.js"></script> 
</head> 
<style> 
.aaa { 
    width: 1000px; 
    height: 0; 
    margin: 0 auto; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
.curveHtml { 
    border: none; 
    width: 100%; 
    height: 100%; 
} 
</style> 
<body> 
<div class="aaa"> 
  <iframe class="curveHtml" scrolling="no"></iframe> 
</div> 
<a href="#" class="look">点击加载css3动画</a> 
</body> 
<script> 
     $(".look").on("click", function() { 
        $(".curveHtml").fadeIn(1000); 
         $(".aaa").css({'height':'550px'}); 
        $(".curveHtml").attr("src", "history.html"); 
    }); 
</script> 
</html>

原理就是用了框架,当点击按钮时,history.html页面被引入进来,动画效果开始执行。

应用实例:本博客“关于”栏目下有个“点击了解本站历史”按钮,点一下你就可以看到效果了。

js库做前端的应该都有,就不提供下载链接了,如果不匹配再用我的。



寻梦xunm

寻梦xunm

奇乐博客专注于Typecho开源程序模板的设计和开发。致力于不断追求设计感和代码的精简语义化只为做出更好的作品。