美文网首页
jquery插件的封装方法

jquery插件的封装方法

作者: DaveWeiYong | 来源:发表于2017-03-03 17:43 被阅读0次

    废话不多说 代码撸起来
    一 ,js封装方法

    function change(){
    window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
    this.style.background = "black";

                };
                //hover事件
                box.onmouseover = function(){
                    this.style.background = "blue"
                };
                //双击事件
                box.ondblclick = function(){
                    this.style.background = "yellow";
                }
                
        }   
    

    };

    调用方法:
    <script>
    change()
    </script>

    二,jquery组件封装
    (function ($) {
    $.fn.typewriter = function () {
    var $ele = $(this), str = $ele.html(), progress = 0;
    $ele.html('');
    var timer = setInterval(function () {
    var current = str.substr(progress, 1);
    if (current == '<') {
    progress = str.indexOf('>', progress) + 1;
    } else {
    progress++;
    }
    $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
    if (progress >= str.length) {
    clearInterval(timer);
    }
    }, 75);
    };
    })(jQuery);

    调用方法
    <script type="text/javascript">
    $(function () {
    $("#code").typewriter();
    });
    </script>

    相关文章

      网友评论

          本文标题:jquery插件的封装方法

          本文链接:https://www.haomeiwen.com/subject/yturgttx.html