推荐搜索: 魏义齐 网站防扒js微信号刷新 利用hbuilder打包APP的步骤清空

您当前的位置:首页 > 前端分享 > 正文

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

发布时间: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;
    -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库做前端的应该都有,就不提供下载链接了,如果不匹配再用我的。

如果本文帮助到了你,请点击本站你感兴趣的广告赞助一下,谢谢!

上一篇:随页面滚动动态加载内容的实现方法 下一篇:phpcms如何将文章编辑器的超链接目标窗口改为默认新窗口

相关文章