js自由拼图
自由拖拽，鼠标滚轴缩放缩小
html 部分
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
li {
list-style:none;
}
.meaasge_contanier {
width:800px;
height:600px;
margin:100px auto 0;
background-color:sienna;
position:relative;
overflow:hidden;
border:3px solid #a25124;
border-radius:10px;
box-shadow:3px 3px 5px #a25124;
}
.meaasge_contanier .upload {
width:120px;
height:40px;
position:absolute;
top:5px;
left:5px;
text-align:center;
}
.meaasge_contanier .upload .plus {
width:100%;
height:100%;
text-align:center;
line-height:40px;
position:absolute;
background-color:#eee;
cursor:pointer;
border-radius:5px;
}
.meaasge_contanier .upload input {
width:150px;
overflow:hidden;
}
.meaasge_contanier .picture_list .item {
width:100px;
position:absolute;
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
cursor:move;
}
.meaasge_contanier .picture_list .item img {
width:100%;
}
.meaasge_contanier .picture_list .item .delete {
position:absolute;
width:20px;
height:20px;
line-height:17px;
text-align:center;
border-radius:50%;
background-color:#909399;
color:#fff;
font-size:12px;
top: -5px;
right: -5px;
display:none;
cursor:default;
}
.scale {
width:10px;
height:10px;
overflow:hidden;
cursor:se-resize;
position:absolute;
right:0;
bottom:0;
background-color:rgb(122, 191, 238);
}
<div class="meaasge_contanier">
<ul class="picture_list">
<li class="item" data-type="0"><div class="delete">x</div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3888642441,3149824551&fm=26&gp=0.jpg" /><div class="scale">
<li class="item" data-type="0"><div class="delete">x</div><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2814303155,1069456303&fm=26&gp=0.jpg" /><div class="scale">
<li class="item" data-type="1"><div class="delete">x
<div class="fonts" >12345671111111111111
1111189
<div class="scale">
</body>
</html>
javascript部分
<script src="js/jquery-3.4.1.min.js">
<script type="text/javascript">
$(function () {
let pictureList =$('.picture_list')
let contanier =$('.meaasge_contanier')
pictureList.on('mousedown', '.item', function (e) {
e.preventDefault()
// 让点击的图片在第一层级
let arr = Array.from($('.item'))
arr.forEach(item => {
$(item).css({
zIndex:0
})
})
let item =$(this)
$(item).css({
zIndex:99
})
const disX = e.clientX - item[0].offsetLeft
const disY = e.clientY - item[0].offsetTop
contanier.mousemove(function (event) {
event.preventDefault()
// 用移动时的位置的clientX减去初始的差值,就得到现在的top值与left值
let x = event.clientX - disX
let y = event.clientY - disY
x = x <0 ?0 : x
x = x > contanier.width() - item.width() ? contanier.width() - item.width() : x
y = y <0 ?0 : y
y = y > contanier.height() - item.height() ? contanier.height() - item.height() : y
item.css({
top: y,
left: x
});
})
contanier.mouseout(function () {
contanier.off('mousemove')
contanier.off('mouseup')
})
contanier.mouseup(function () {
contanier.off('mousemove')
contanier.off('mouseup')
})
})
pictureList.on('click', '.delete', function () {
$(this).parent('.item').remove()
})
pictureList.on('mouseover', '.item', function () {
$(this).children('.delete').show()
})
pictureList.on('mouseout', '.item', function () {
$(this).children('.delete').hide()
})
pictureList.on('mousedown', '.scale', function (e) {
e.stopPropagation();
e.preventDefault();
var item=$(this).parent();
var pos = {
'w':$(item).width(),
'h':$(item).height(),
'x': e.clientX,
'y': e.clientY
};
contanier.bind("mousemove",function (ev) {
ev.preventDefault()
// 设置图片的最小缩放为30*30
var w = Math.max(30, ev.clientX - pos.x + pos.w);
var h = Math.max(30,ev.clientY - pos.y + pos.h);
// 设置图片的最大宽高
w = w >= contanier[0].offsetWidth-item.offsetLeft ? contanier[0].offsetWidth-item.offsetLeft : w
h = h >= contanier[0].offsetHeight-item.offsetTop ? contanier[0].offsetHeight-item.offsetTop : h
item.css("width",w+"px");
item.css("height",h+"px");
});
});
pictureList.on("mousewheel DOMMouseScroll" ,'.item', function (e) {
let delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta >0 ?1 : -1)) ||// chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail >0 ? -1 :1)); // firefox
let type=$(this).attr("data-type");
let w=$(this).width();
let h=$(this).height();
if (delta >0) {
//放大图片
// 设置图片的最小缩放为30*30
if(w>=contanier[0].offsetWidth||h>=contanier[0].offsetHeight)
{
return;
}
if(type==0)
{
w +=30;
h+=30;
$(this).css("width",w+"px");
$(this).css("height",h+"px");
}
else
{
let fontsize=parseInt($(this).find(".fonts").css("font-size").replace("px",""));
if(fontsize>=48)return;
fontsize+=2;
$(this).find(".fonts").css("font-size",fontsize+"px");
$(this).css({"width":"auto","height":"auto"});
}
}else if (delta <0) {
//缩小图片
console.log(type);
if(type==0)
{
// 设置图片的最小缩放为30*30
if(w<=100||h<=100)
{
return;
}
w -=30;
h -=30;
$(this).css("width",w+"px");
$(this).css("height",h+"px");
}
else
{
let fontsize=parseInt($(this).find(".fonts").css("font-size").replace("px",""));
if(fontsize<=16)
{
return;
}
console.log(fontsize);
fontsize-=2;
$(this).find(".fonts").css("font-size",fontsize+"px");
$(this).css({"width":"auto","height":"auto"});
}
}
});
});
</script>
