点击按钮在当前页面加载另一个页面的方法

发布时间：2018-03-08 23:24:54作者：魏义齐阅读：()评论：

本文为博主原创文章，未经博主允许不得转载！

上一篇文章《随页面滚动动态加载内容的实现方法》实现的动画效果毕竟有限，论动画还得是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;

  transition: all 1s;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

}

.curveHtml {

    border: none;

    width: 100%;

    height: 100%;

}

</style>

<body>

<div class="aaa">

  <iframe class="curveHtml" scrolling="no"></iframe>

</div>

<a 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页面被引入进来，动画效果开始执行。

本文标签：，您可以阅读与「」相关的所有文章

魏义齐全栈技术交流：