jquery 图片连线插件

资料来源：网络整理时间：2023/2/14 0:58:26 共计：3633 浏览

jquery 图片连线插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../scripts/jquery/jquery-1.11.2.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>

</head>
<body>

    <div id="connect" style="">
        <ul id="ul1">
            <li id="l1"><img src="200709018758949.jpg"></li>
            <li id='l2'><img src="200709018758949.jpg"></li>
            <li id='l3'><img src="200709018758949.jpg"></li>
            <li><img src="200709018758949.jpg"></li>
        </ul>
        <ul>
            <li><img src="200709018758949.jpg"></li>
            <li><img src="200709018758949.jpg"></li>
            <li><img src="200709018758949.jpg"></li>
            <li><img src="200709018758949.jpg"></li>
        </ul>
    </div>
</body>
</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：svg.js和jquery实现连线功能 | ·下一条：流程设计器jQuery + svg/vml(Demo4 - 画连线)