专栏首页若是烟花编写一个简单的JQuery插件

编写一个简单的JQuery插件

一个简单的JQuery插件


功能比较简单的插件,代码如下:

/**
 * Created by lpe234 on 2016-11-26.
 */

"use strict";

(function ($) {

    // 默认参数
    var defaults = {
        timeout: 100
    };

    // 定义扩展函数
    $.fn.flashIt = function (option) {
        // 获取最终参数
        var options = $.extend(defaults, option);

        // 给元素绑定事件
        var timeout = options.timeout;

        var ele = this;
        ele.bind('click', function () {
            ele.hide();
            setTimeout(function () {
                ele.fadeIn();
            }, timeout);
        });

        // 修改样式
        ele.css('cursor', 'pointer');
    };
})(jQuery);

示例Html文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 id="tog">123</h1>

<script src="jquery-2.1.3.min.js"></script>
<script src="flashIt.js"></script>
<script>
    $('#tog').flashIt({
        timeout: 100
    });
</script>
</body>
</html>

最终效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nginx 配置相关--Gzip压缩、CORS

    lpe234
  • 七日Python之路--第二天

    由于之前使用过一段Ubuntu,所以基本命令啥的都还可以。装差利器Vim也是使用过一段时间的。

    lpe234
  • JavaScript 框架学习(JQuery)

    参考: http://www.w3cschool.cc/jquery/jquery-tutorial.html

    lpe234
  • Python——多态

            Python作为一门面对对象的语言,那么肯定也是有多态这个属性的,这里主要跟C++的多态做一下类比

    py3study
  • Javascript之in操作符的用法

    in操作符是js里面常用的一个操作符,下面是其几个常用的功能: 1、配合for语句循环遍历/迭代数组中的元素 2、配合for语句循环遍历/迭代集合中的属性 3、...

    郑小超.
  • 大数据为飞机制造业带来新的机遇与挑战

    导读:民机主制造商是天然的数据生产者和集成者,相关的数据类型和领域众多。在新一轮技术大变革背景下,这些数据无疑也为民机制造业带来了新的机遇与挑战。理解、认识、用...

    钱塘数据
  • PHP 函数篇(下):匿名函数和作用域

    从 PHP 5.3 开始,引入了对匿名函数的支持,所谓匿名函数就是在函数定义中没有显式声明函数名,在 PHP 中,匿名函数也被称作闭包函数(Closure)。

    学院君
  • Click fireworks

    将下方代码添加到 你当前使用主题的index.ejs 即可加入到首页,我推荐只将其加入到首页,文章页 尽量保持简洁。

    BORBER
  • 技巧 | XSS的常见绕过方法

    <script>alert('XSS test')</script> “<script>alert('XSS test')</script> <script...

    HACK学习
  • Python数据可视化:25年GDP之变

    数据森麟

扫码关注云+社区

领取腾讯云代金券