发布：2021/12/13 15:13:00作者：管理员 来源：本站 浏览次数：1096
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="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>
</body>
</html>
