搜索

当前位置:首页 > 全栈分享 > 综合应用 > 正文

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

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

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

上一篇文章《随页面滚动动态加载内容的实现方法》实现的动画效果毕竟有限,论动画还得是css3,但有些css3动画是自动执行的而不是触发,css3虽然有延时执行动画的代码,但这个代码效果是死的,如何变成活的呢?

实现全部代码如下:
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>点击按钮在当前页面加载另一个页面的方法-综合应用-魏义齐个人博客</title> 
  6. <script src="js/jquery-1.11.0.min.js"></script> 
  7. </head> 
  8. <style> 
  9. .aaa { 
  10.     width: 1000px; 
  11.     height: 0; 
  12.     margin: 0 auto; 
  13.     transition: all 1s; 
  14.     -webkit-transition: all 1s; 
  15.     -moz-transition: all 1s; 
  16.     -o-transition: all 1s; 
  17. .curveHtml { 
  18.     border: none; 
  19.     width: 100%; 
  20.     height: 100%; 
  21. </style> 
  22. <body> 
  23. <div class="aaa"> 
  24.   <iframe class="curveHtml" scrolling="no"></iframe> 
  25. </div> 
  26. <a class="look">点击加载css3动画</a> 
  27. </body> 
  28. <script> 
  29.      $(".look").on("click", function() { 
  30.         $(".curveHtml").fadeIn(1000); 
  31.          $(".aaa").css({'height':'550px'}); 
  32.         $(".curveHtml").attr("src", "history.html"); 
  33.     }); 
  34. </script> 
  35. </html> 
原理就是用了框架,当点击按钮时,history.html页面被引入进来,动画效果开始执行。

js库做前端的应该都有,就不提供下载链接了。

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

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:写了一个多功能悬浮窗插件,分享给大家下一篇:如何快速制作一个带特效的选项卡

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包