Xunm模版升级成功,原购买的朋友可以联系作者进行升级操作
首页 » 教程 » 点击按钮在当前页面加载另一个页面的方法
点击按钮在当前页面加载另一个页面的方法
  • admin
  • 2019-01-09
  • 36 次
  • 0 条
  • 教程

  • 实现的动画效果毕竟有限,论动画还得是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库做前端的应该都有,就不提供下载链接了,如果不匹配再用我的。



    最后修改于:2019-01-09 16:46
    分享


    博主介绍

  • 博主:寻梦xunm
  • 邮箱:vipshiyi@qq.com
  • 微信:shiihk
  • 熊掌号:奇乐之梦
  • 语录:追寻最初的梦想,坚持走下去!
  • 博主说说

    申请转正的朋友请在或者文章下面进行评论留言即可,

    转正评论留言格式为:你注册的用户名称或者邮箱即可!