拼图demo"/>
图片拼图demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<!-- <script src=".2.3/jquery.min.js"></script> -->
<script src=".1.4/jquery.min.js"></script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(247, 238, 217);
}
.box_ {
position: relative;
}
</style>
<body>
<div class="box">
<div class="box_">
</div>
</div>
</body>
<script>
var mainImge = ";quality=80&size=b9999_10000&sec=1605774614927&di=f207b555c59245ff405014f905affbee&imgtype=0&src=http%3A%2F%2Fa2.att.hudong%2F27%2F81%2F01200000194677136358818023076.jpg";
var widthW = 400 //图片宽
var heightH = 400 //图片高
var block = 3 //拼图个数
var moveId=''
var text=false
var css = {
backgroundImage: `url('${mainImge}')`,
width: `${widthW}px`,
height: `${heightH}px`,
backgroundSize: `${widthW}px ${heightH}px`,
opacity: "0.6",
borderRadius: "10px",
backgroundRepeat: 'no-repeat',
}
$('.box_').css(css);
var $div = '<div class="box_img"></div>';
for (let i = 1; i <= block; i++) {
$('.box').append($div);
}
var imgcss = {}
for (let i = 0; i < block; i++) {
var x = 12;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
imgcss = {
backgroundImage: `url('${mainImge}')`,
width: `${widthW}px`,
height: `${heightH / block}px`,
backgroundSize: `${widthW}px ${heightH}px`,
backgroundRepeat: 'no-repeat',
backgroundPosition: `0px -${i * heightH / block}px`,
position: "absolute",
top: `${i * heightH / block}px`,
left: `${rand * 10 + widthW}px`,
zIndex:'0'
}
if(i==0){
imgcss.left='0'
}
$('.box_img').eq(i).attr('id', `img${i}`)
$('.box_img').eq(i).css(imgcss)
}
var offsetX = 0;
var offsetY = 0;
//第一步：鼠标点下时获取鼠标落下的位置
$(".box_img").mousedown(function (ev) {
offsetX = ev.clientX - $(this).offset().left;
offsetY = ev.clientY - $(this).offset().top;
$('.box_img').css({zIndex:'0'})
var _this = this;
// moveId=$(_this).attr('id')
// console.log($(_this).attr('id'))
//第二步：在document下div跟随鼠标移动
$(document).mousemove(function (ev) {
$(_this).css({
left: ev.clientX - offsetX,
top: ev.clientY - offsetY,
zIndex:'2'
})
})
})
function getcss(obj,key){
return $(obj).css(key).replace("px","")
}
//第三步：在document下 鼠标抬起，取消跟随事件
$(document).mouseup(function () {
$(document).off('mousemove');
if(text){
darg()
}else{
darg()
}
});
function darg(){
var leftobj=[]
var topobj=[]
var tan=false
var tans=false
for(var i=0;i<block;i++){
var left= getcss(`#img${i}`,'left')
var top =getcss(`#img${i}`,'top')
leftobj.push(left)
topobj.push(top)
}
if((Math.abs(leftobj[0]-leftobj[1])<=20)&(Math.abs(topobj[0]-topobj[1])<=20+Number(topobj[0])+2*Number(heightH / block))){
var css1={
top: `${Number(topobj[0])+Number(heightH / block)}px`,
left: `${leftobj[0]}px`,
}
tan=true
$('#img1').css(css1)
// console.log(css1)
}
if(block==3){
}else{
if(tan){
alert('闯关成功')
}
}
if(block==2){
return false
}
if((Math.abs(leftobj[0]-leftobj[2])<=20)&(Math.abs(topobj[0]-topobj[2])<=20+Number(topobj[0])+2*Number(heightH / block))){
var css1={
top: `${Number(topobj[0])+2*Number(heightH / block)}px`,
left: `${leftobj[0]}px`,
}
tans=true
console.log(css1)
$('#img2').css(css1)
}
if(tan&tans){
if(tan){
text=true
alert('闯关成功')
}
}
$(document).off("mousemove");
// console.log(leftobj)
// console.log(topobj)
}
</script>
</html>
更多推荐
图片拼图demo
发布评论