首页 > Web开发 > 详细

基于jQuery编写的页面跳转简单的小插件

时间:2014-03-18 12:32:54      阅读:450      评论:0      收藏:0      [点我收藏+]

  其实这个很简单,就是一个脚本函数和两个参数(url,jupetime),

  开始实现步骤:

    1.像页面引用一个jquery工具包

    2.在javascript脚本编写自定义方法:

       方法声明:

       $.extend({

        meMethod:function();

       });

     方法调用:

       $.meMethod();

  3.具体实现脚本代码:

        

bubuko.com,布布扣
 1 <script type="text/javascript">
 2         $(function () {
 3             $.extend({
 4                 pageJupe: function (tim, url) {
 5                         //创建节点
 6                         var di = $("<div  style=‘width:200px; height:100px; background-color:#dbd2d2;text-align:center;line-height:80px; position:absolute; top:45%; left:45%;‘><p>页面将在<span id=‘time‘ style=‘color:red;font-size:25px;‘>" + tim + "</span>秒后自动跳转</p></div>");
 7                         $(‘body‘).append(di);
 8                         var ding = setInterval(function () {
 9                         tim--;
10                         $(‘#time‘).html(tim);
11                         if (tim == 0) {
12                             clearTimeout(ding); //清空定时器
13                             di.remove();    //删除节点
14                             window.location =url;   //跳转页面
15                         }
16                     }, 1000);
17                 }
18            });
19         });
20 </script>
bubuko.com,布布扣

    4.函数调用方法:

         首先在页面引用上段脚本代码,然后用:

          $.pageJupe(跳转页面的时间,跳转页面的地址); 来调用;

     5.友情提示:

         以上代码仅供参考,要是同志们有需要用到,可以把上面的脚本代码复制下来,专门存为一个脚本文件,然后按照调用方法即可使用

    

      

基于jQuery编写的页面跳转简单的小插件,布布扣,bubuko.com

基于jQuery编写的页面跳转简单的小插件

原文:http://www.cnblogs.com/haizeiwen/p/3604423.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!