jquery 圖片連線插件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
(function ($) {

    function draw(id,point1,point2){
        var canvas = document.getElementById(id);
        var cxi = canvas.getContext("2d");
        
        cxi.strokeStyle = "blue";
        cxi.lineCap = "round";
        cxi.lineWidth = 5;
        cxi.beginPath();
        cxi.moveTo(point1[0],point1[1]);
        cxi.lineTo(point2[0],point2[1]);
        cxi.stroke();    
    }

    $.fn.setConnectUI = function(options){
        id =this.attr('id');
        canvasId = id + '_canvas';
        results = [];
        var defaults = {
            canvasWidth:100
        }
        var options = $.extend(defaults, options);

        var ul = $(this).find('ul');
        var ul_li = ul.find('li');
        var ul_1 = ul.first();
        var ul_1_li = ul_1.find('li');
        var ul_2 = ul.last();
        var ul_2_li = ul_2.find('li');
        

        ul_1.after($('<canvas width='+ options.canvasWidth + ' height=' + ul.height() + ' id=' + canvasId+'>'));

        var points = [];
        var t = this.offset().top;
        ul_1_li.each(function(i){
            var $this = $(this);
            points.push([0,$this.offset().top - t + $this.height()/2]);
        })

        ul_2_li.each(function(i){
            var $this = $(this);
            points.push([options.canvasWidth,$this.offset().top - t + $this.height()/2]);
        })

       
        
       

        var li_click = function(){
            $this = $(this);
            if($this.hasClass('inactive')){return};
            $this.toggleClass('selected');
            $this.siblings().removeClass('selected');

            var selected1 = ul_1_li.filter('.selected');
            var selected2 = ul_2_li.filter('.selected');

            if(selected1.length + selected2.length == 2){
                var index1 = ul_1_li.index(selected1);
                var index2 = ul_2_li.index(selected2)+ ul_1_li.length ;
                draw(canvasId,points[index1],points[index2]);
                results.push([index1,index2]);
                selected1.addClass('inactive').removeClass('selected');
                selected2.addClass('inactive').removeClass('selected');
            }

            if(ul_li.filter('.inactive').length == ul_li.length)
            {
                console.log('done');
                options.campute();
            }

        }

        ul_1_li.bind('click',li_click);
        ul_2_li.bind('click',li_click);
            



    };
})(jQuery);

$(function(){

    var correctResults = [[0,7],[1,4],[2,6],[3,5]];
    var campute = function(){
        correct = 0;
        $.each(results,function(){
            r = this;
            var c = correctResults;
            for(i=0; i< c.length;i++){
                if(this[0]== c[i][0] && this[1] == c[i][1]
                    || this[0] == c[i][1] && this[1] == c[i][0]){
                    correct++;
                }
            }
        });
        alert('correct:'+correct);
    };

    $('#connect').setConnectUI({campute:campute});
})
</script>
<style type="text/css">

    @media screen and (max-width: 400px) {
        li{
        list-style-type:none;
        margin-bottom: 20px;
        border: 2px rgb(121, 121, 121) solid;
        height: 100px;
        width: 100px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px
    }   

    ul{
        float: left;
        width: 100px;
        padding: 0;
        margin: 0;

    }

    img{
        height: 100px;
        width: 100px;
    } 
}

    @media screen and (min-width: 400px) {
        li{
        list-style-type:none;
        margin-bottom: 20px;
        border: 2px rgb(121, 121, 121) solid;
        height: 160px;
        width: 160px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px
    }   

    ul{
        float: left;
        width: 160px;
        padding: 0;
        margin: 0;

    }

    img{
        height: 160px;
        width: 160px;
    } 
}
    

    

    canvas{
        float: left;
    }

    .selected{
       -webkit-box-shadow: 3px 3px 3px gray;
        -moz-box-shadow: 3px 3px 3px gray;
        box-shadow: 3px 3px 3px gray;

    }

    
</style>

<div id= "connect" style="">
<ul id ="ul1">
<li id="l1"><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
<li id='l2'><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
<li id='l3'><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
<li><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
</ul>
<ul>
   <li><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
   <li><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
   <li><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
  <li><img src="http://img7.9158.com/200709/01/11/53/200709018758949.jpg"></li>
</ul>
</div>