效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>元素的移动、旋转、缩放</title>
<style>
#box{width: 100%;height: 100%;position: fixed;top:0;left: 0;}
.btn{height: 30px;border:1px solid #ccc;position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);padding:10px;}
.img { background-size: 100% 100%; display: inline-block; position: absolute; top:20px; right:0;border: 1px dotted transparent;}
.img.active{border: 1px dotted #4dbcf0; box-shadow: 0px 0px 5px #fff ; }
.img span{ display: inline-block; width: 30px; height: 30px;position: absolute; }
.img span.r_b{ display: none; right: -15px; bottom:-15px; cursor: se-resize; background-image: url("https://api.1dospace.com/html/img/move_ele_rotate.png");background-size: 50% 50%; background-repeat: no-repeat; background-position: center center;border-radius: 50%; background-color: #87c9f9;}
.img span.close{ display: none; left: -15px; top: -15px; cursor:pointer; background-image: url("https://api.1dospace.com/html/img/move_ele_exit.png");background-size: 50% 50%; background-repeat: no-repeat; background-position: center center; border-radius: 50%; background-color: #e86b59;}
.img.active span.close{ display: inline-block; }
.img.active span.r_b{ display: inline-block; }
.img span.c{ width: 1px; height: 1px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.img .domImg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
</style>
</head>
<body>
<div id="box"></div>
<div class="btn">点击我创建元素</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var arr = ["1.jpg","2.jpg","3.jpg","4.jpg"];
$(".btn").click(function(){
var randomNum = Math.floor(Math.random() * arr.length);
initMyDragDom(arr[randomNum],"#box");
})
function initMyDragDom(url,pdom){
var img = new Image();
img.onload = function(){
var dom = document.createElement('div');
$(dom).addClass('img');
$(dom).css({width:(img.width)/3,height:(img.height)/3});
var domImg = document.createElement('img');
$(domImg).addClass('domImg');
$(domImg).attr("src",url);
$(dom).append(domImg);
var spanResize = document.createElement('span');
$(spanResize).addClass('r_b');
$(dom).append(spanResize);
var spanCenter = document.createElement('span');
$(spanCenter).addClass('c');
$(dom).append(spanCenter);
var spanCenter = document.createElement('span');
$(spanCenter).addClass('close');
$(dom).append(spanCenter);
$(pdom).append(dom);
// $.each(conf, function(i,d) {
// $(dom).css(i,d);
// });
$('.img.active').removeClass('active');
$(dom).addClass('active');
setzIndex(dom);
initMyDragEvent(dom);
};
img.src = url;
}
function setzIndex(pdom){
var z_index = window.t_zindex?window.t_zindex+1:1000;
window.t_zindex = z_index;
$(pdom).css('z-index',z_index);
}
function initMyDragEvent(dom){
var epoint={x:0,y:0};
var Style = {x:0,y:0,s:1,a:0};
var Style0 = {x:0,y:0,s:1,a:0};
var isDown = 0;
var isResize = 0;
var spanResize = $(dom).find('.r_b')[0];
var spanCenter = $(dom).find('.c')[0];
var spanClose = $(dom).find('.close')[0];
var isMove = 0;
$(dom).on('touchstart',function(ev){
setzIndex(dom);
if(isResize) return false;
isDown = 1;
epoint = getPosition(ev);
if($(dom).attr('dat') && $(dom).attr('dat').length>0){
Style = JSON.parse($(dom).attr('dat'));
Style0 = JSON.parse($(dom).attr('dat'));
}
$('body').on('touchmove',function(ev){
if(isDown && !isResize){
var tpoint = getPosition(ev);
Style.x = Style0.x+(tpoint.x-epoint.x);
Style.y = Style0.y+(tpoint.y-epoint.y);
setDomStyle();
isMove=1;
}
});
$('body').on('touchend',function(ev){
isResize?isDown = 0:{};
if(isMove){
$(dom).removeClass('active')
}else{
if($(dom).hasClass('active')){
$(dom).removeClass('active')
}else{
$('.img.active').removeClass('active');
$(dom).addClass('active') ;
}
}
isMove=0;
$('body').unbind('touchmove touchend');
});
});
$(spanResize).on('touchstart',function(ev){
setzIndex(dom);
isResize = 1;
isDown = 0;
if($(dom).attr('dat') && $(dom).attr('dat').length>0){
Style = JSON.parse($(dom).attr('dat'));
Style0 = JSON.parse($(dom).attr('dat'));
}
epoint = getPosition(ev);
var cPoint = {x:$(spanCenter).offset().left,y:$(spanCenter).offset().top};
var d0 = {x:epoint.x-cPoint.x,y:epoint.y-cPoint.y};
$('body').on('touchmove',function(ev){
console.log("OK"+isDown+"--"+isResize);
if(!isDown && isResize){
var tepoint = getPosition(ev);
var d1 = {x:tepoint.x-cPoint.x,y:tepoint.y-cPoint.y}
var jd = (Math.atan(Math.abs(tepoint.y-cPoint.y)/Math.abs(tepoint.x-cPoint.x))-Math.atan(Math.abs(epoint.y-cPoint.y)/Math.abs(epoint.x-cPoint.x)));
Style.s = Style0.s * (Math.sqrt(Math.pow(d1.x,2)+Math.pow(d1.y,2))/Math.sqrt(Math.pow(d0.x,2)+Math.pow(d0.y,2)));
Style.s = Math.min(Math.max(Style.s,0.5),2);
Style.a = Style0.a + jd*Math.PI *20 ;
setDomStyle();
}
});
$('body').on('touchend',function(ev){
isResize = 0;
$('body').unbind('touchmove touchend');
});
});
$(spanClose).on('touchstart',function(){
$(this).parents('.img').remove();
});
function getPosition(ev){
var tev = ev;
var tev = ev.originalEvent.touches[0];
return {x:tev.clientX,y:tev.clientY};
}
function setDomStyle() {
var value = [ 'translate(' + Style.x + 'px, ' + Style.y +'px)', 'scale(' + Style.s + ', ' + Style.s + ')', 'rotate(' + Style.a + 'deg)' ];
value = value.join(" ");
$(dom).attr('dat',JSON.stringify(Style)).css('-webkit-transform',value).css('-moz-transform',value).css('transform',value);
}
}
</script>
</html>
网友评论