JQuery實用技巧--學會你也是大神(1)——插件的製做技巧

  前  言

JRedu

學習以前，首先咱們須要知道什麼是JQuery?
　　JQuery是一個優秀的javascript框架。
　　JQuery是繼Prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,作更多的事情。它是輕量級的js庫，這是其它的js庫所不及的，它兼容CSS3，還兼容各類經常使用瀏覽器。
　　JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，而且方便地爲網站提供AJAX交互。
　　JQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。JQuery可以使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id便可。進行jQuery插件開發前，首先要知道兩個問題：什麼是jQuery插件？jQuery插件如何使用？　　第一個問題，jQuery插件就是用來擴展jQuery原型對象的一個方法，簡單來講就是jQuery插件是jQuery對象的一個方法。其實回答了第一個問題，也就知道第二個問題的答案了，jQuery插件的使用方式就是jQuery對象方法的調用。

　　JQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前臺頁面上的組件都有對應插件，而且用JQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。

一、自定義插件的基礎知識

 

1.1  插件的分類

　　插件分爲兩類。

　　一類叫作全局插件，另外一種叫作局部插件。從名字咱們就能夠了解到二者的區別。

　　全局插件是做用於整個文檔的插件。

　　局部插件是做用於某一塊區域的插件。

　　

1.2插件的聲明和調用

 

　　1.　全局插件的聲明

　　　　$.extend({
    　　　　 func:function(){} // func-->插件名
　　　　})

　　　　調用方式和函數相似

　　　　$.func();

　　2.　局部插件的聲明

  　　  $.fn.func = function(){}

　　　　調用方式有所不一樣

　　　　$("選擇器").func();

 

二、 自定義插件的準備工做

 

2.1插件的功能介紹

 

　　 該插件實現了Banner圖的滾動效果。

　 　插件具備如下屬性：

 　　images :　　 接受數組類型，數組的每一個值應爲對象。對象具備屬性： src->圖片的路徑 title->圖片指上後的文字 href->點擊圖片跳轉的頁面
　　 scrollTime :　　 滾動時間，單位毫秒。 5000
　　 bannerHeight : 　　Banner圖的高度. 500px
　　 iconColor : 　　提示圖標的顏色。默認 white
　　 iconHoverColor :　　 提示圖標指上以後的顏色。 默認 orange
 　　iconPosition : 　　提示圖標的位置，可選值left/center/right。 默認center

 

2.2基礎文件的準備

 

　　首先，咱們須要新建一個HTML文件和一個JS文件。

　　而後將JS文件和JQuery文件導入進來。

　　而後新建一個空div。

<div id="banner">
            
</div>

　　用JQuery導入幾張圖片

    <script type="text/javascript">
        $("#banner").scrollBanner({
            images : [
                {src:"img/banner1.jpg",href:"http://www.baidu.com"},
                {src:"img/banner2.jpg",href:"http://www.sina.com"},
                {src:"img/banner3.jpg",href:"http://www.qq.com"},
                {src:"img/banner4.jpg",href:"http://www.jredu100.com"},
            ],
        });
    </script>

　　這樣基本的準備工做就完成了，接下來就是插件的實現了。

 

三、 自定義插件的製做

 

3.1聲明屬性值

　　

　　這是一個十分實用，使用起來也很是簡單的banner圖滾動插件。

　　首先建立一個做用於div的局部插件，而後設置屬性默認值

　　

    　$.fn.scrollBanner = function(obj){
        // 聲明各個屬性的默認值
        var defaults = {
            images : [],
            scrollTime : 2000,
            bannerHeight : "500px",
            iconColor : "white",
            iconHoverColor : "orange",
            iconPosition : "center"
      　}
        // 將默認值與傳入的對象比對，若是傳入的對象有未賦值屬性，則使用默認對象的屬性
        obj = $.extend(defaults,obj);
 　 　}

 　　後面的代碼所有寫入這個函數中。

 

3.2組建DOM佈局

 

　　這是一個比較清晰的過程，直接用代碼展現給你們。

　　

        $("body").css({
            "padding":"0px",
            "margin" :"0px"
        });
        this.empty().append("<div class='scrollBanner-banner'></div>");
        $.each(obj.images,function(index,item){
            $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title+"' /></a></div>");
        });
        $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"+obj.images[0].title+"' /></a></div>");
        
        this.append("<div class='scrollBanner-icons'></div>")
        $.each(obj.images,function(index,item){
            // data-*屬性 ：是H5容許用戶自行在HTML標籤上保存數據的屬性。
            // 保存在data-*中的數據，可使用JS讀取調用。
            $(".scrollBanner-icons").append("<span data-index="+index+" class='scrollBanner-icon'></span>");
        });
        
        $(".scrollBanner-icons").css({
            "width":25*obj.images.length+"px",
            "height":"5px",
            "position":"absolute",
            "bottom":"40px",
            "left":"0px",
            "z-index":"100",
        });
        switch(obj.iconPosition){
            case "left":
                $(".scrollBanner-icons").css({
                    "left":"50px",
                });
                break;
            case "right":
                $(".scrollBanner-icons").css({
                    "right":"50px",
                });
                break;
            case "center":
                $(".scrollBanner-icons").css({
                    "left":"50%",
                    "margin-left":"-"+12.5*obj.images.length+"px"
                });
                break;
        }
        $(".scrollBanner-icon").css({
            "width":"15px",
            "height":"5px",
            "background-color":obj.iconColor,
            "display":"inline-block",
            "margin":"0px 5px",
        });

 

3.3設置CSS的屬性

 

　　經過一段代碼，進行簡單的CSS設置。

        this.css({
            "width":"100%",
            "height":obj.bannerHeight,
            "overflow":"hidden",
            "position":"relative"
        })
        
        $(".scrollBanner-banner").css({
            "width":obj.images.length+1+"00%",
            "height":obj.bannerHeight,
            "transtition":"all .5s ease"
        })
        $(".scrollBanner-bannerInner").css({
            "width":100/(obj.images.length+1)+"%",
            "height":obj.bannerHeight,
            "overflow":"hidden",
            "float":"left"
        })
        $(".scrollBanner-bannerInner img").css({
            "width":"1920px",
            "height":obj.bannerHeight,
            "position":"relative",
            "left":"50%",
            "margin-left":"-960px"
        })
        $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);

 

3.4實現banner圖的滾動

 

　　實現banner圖的不停滾動，基本原理是利用定時器。

　　而後不停改變最外面大div的margin-left屬性，改變顯示在屏幕上的圖片，再加上適當的動畫效果，造成滾動。

　　最後經過設定好的參數變量，修改滾動的速度。

　　一樣的，附上一段代碼。

　　

        var count=1;
        var icons = $(".scrollBanner-icon");
        setInterval(function(){
            $(".scrollBanner-banner").css({
                "margin-left":"-"+count+"00%",
                "transition":"all .5s ease"
            });
            $(".scrollBanner-icon").css("background-color", obj.iconColor);
            $(".scrollBanner-icon:eq("+count+")").css("background-color", obj.iconHoverColor);
            
            if (count>=obj.images.length){
                $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);
            }
            
            if (count>obj.images.length) {
                count=0;
                $(".scrollBanner-banner").css({
                    "margin-left":"0px",
                    "transition":"none"
                });
            }
            count++;
        },obj.scrollTime);

 

　　這樣以後，banner圖就能夠自動滾動了，但是一個只能不停滾動的banner圖，可能並不符合咱們的預期。

　　咱們更想要的是一個能夠隨意切換本身想要的圖片的效果。

 

3.5實現圖片的自由切換

 

　　咱們順帶作一個圖片指上導航小圖標，不只切換圖片，還讓小圖標變色的效果。

　　原理以下：

　　

        // 小圖標指上之後變色而且切換banner圖
        $(".scrollBanner-icon").mouseover(function(){
            $(".scrollBanner-icon").css("background-color",obj.iconColor);
            // 由span觸發mouseover事件，則this指向這個span。
            // 可是，這this是JS對象，必須使用$封裝成JQuery對象。
            $(this).css("background-color",obj.iconHoverColor);
            var index = $(this).attr("data-index");
            count = index; // 將計數器count修改成index的值，讓Banner滾動的定時器可以恰好滾到所指圖片的下一張。
            $(".scrollBanner-banner").css({
                "transition":"none",
                "margin-left":"-"+index+"00%",
            });
        })

 　　這樣，一個很是好用的banner圖滾動插件就完成了。

　　 當咱們使用的時候，只需新建一個div，起好ID，而後用JS將須要滾動的圖片導入便可。

　　 這即是製做一個小插件的基本原理和思路了，但願能幫助到一些初學者。

　　 以後會陸續更新這一系列，給你們帶來更多的實用小技巧。

　　 但願你們多多批評指正。