<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<script src="jquery.js"></script>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.a img {
100%;
height: 100%;
}
.a {
position: absolute;
top: 50px;
left: 50px;
100px;
height: 100px;
background: gray;
position: absolute;
}
.b {
position: absolute;
top: 250px;
left: 250px;
100px;
height: 100px;
background: gray;
position: absolute;
}
.vmobile {
margin-left: 30px;
margin-top: 30px;
position: relative;
375px;
height: 667px;
border: 1px solid #e3e3e4;
box-shadow: -2px 0px 5px 1px #e3e3e4, 0px -2px 5px 1px #e3e3e4, 2px 0px 5px 1px #e3e3e4, 0px 2px 5px 1px #e3e3e4;
}
.con {
display: flex;
}
.handlerCon {
flex: 1;
padding-left: 30px;
}
.mobileItem {
animation-duration: 3s;
animation-delay: .2s;
animation-iteration-count: infinite;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<div class="con">
<div class="vmobile">
</div>
<div class="handlerCon">
<button id="createDiv">创建容器</button>
<div>
选中元素样式
<div>
<input id="target_id" type="hidden">
<label>高度</label><input id="target_height">
<br>
<label>宽度</label><input id="target_width"> <br>
<label>左边距</label><input id="target_left"><br>
<label>顶边距</label><input id="target_top"> <br>
<label>背景</label><input id="target_background"> <br>
<label>圆角</label><input id="target_border-radius"> <br>
<label>边框</label><input id="target_border"> <br>
<label>层级</label><input id="target_z-index">
<button id="submit">确定</button>
</div>
<input id="insertimgurl" type="text" placeholder="请输入图片链接">
<button id="insertButton">确定插入图片</button>
<button class="animal" name='bounce'>bounce</button>
<button class="animal" name='flash'>flash</button>
<button class="animal" name='pulse'>pulse</button>
<button class="animal" name='rubberBand'>rubberBand</button>
</div>
</div>
</div>
</body>
<script>
var arrcommon = ['height', 'width', 'left', 'top', 'background', 'border-radius', 'border', 'z-index']
$.fn.createBorder = function () {
$(".handler").remove();
var that = $(this);
var height = that.height();
var width = that.width();
var border = document.createElement("div");
border.style.width = (width) + "px"
border.style.height = (height) + "px"
border.style.position = "absolute";
border.style.top = "0px";
border.style.left = "0px";
border.style.cursor = "pointer";
border.classList.add("handler")
that.append(border)
var leftTop = document.createElement("div");
leftTop.style.width = "10px"
leftTop.style.height = "10px"
leftTop.style.position = "absolute";
leftTop.style.background = "black";
leftTop.style.top = "-10px";
leftTop.style.left = "-10px";
leftTop.style.cursor = "nw-resize";
leftTop.classList.add("handler")
that.append(leftTop)
var leftBottom = document.createElement("div");
leftBottom.style.width = "10px"
leftBottom.style.height = "10px"
leftBottom.style.position = "absolute";
leftBottom.style.background = "black";
leftBottom.style.bottom = "-10px";
leftBottom.style.left = "-10px";
leftBottom.style.cursor = "sw-resize";
leftBottom.classList.add("handler")
that.append(leftBottom)
var rightTop = document.createElement("div");
rightTop.style.width = "10px"
rightTop.style.height = "10px"
rightTop.style.position = "absolute";
rightTop.style.background = "black";
rightTop.style.top = "-10px";
rightTop.style.right = "-10px";
rightTop.style.cursor = "ne-resize";
rightTop.classList.add("handler")
that.append(rightTop)
var rightBottom = document.createElement("div");
rightBottom.style.border = "1px dashed green"
rightBottom.style.width = "10px"
rightBottom.style.height = "10px"
rightBottom.style.position = "absolute";
rightBottom.style.background = "black";
rightBottom.style.bottom = "-10px";
rightBottom.style.right = "-10px";
rightBottom.style.cursor = "se-resize";
rightBottom.classList.add("handler")
that.append(rightBottom)
var leftTopx = ""
var leftTopy = ""
var leftTopdown = false
var top = "";
var left = "";
$(leftTop).mousedown(function (e) {
height = that.height();
width = that.width();
leftTopx = e.pageX;
leftTopy = e.pageY
leftTopdown = true
top = that.position().top;
left = that.position().left;
});
var leftBottomx = ""
var leftBottomy = ""
var leftBottomdown = false
var top1 = "";
var left1 = "";
$(leftBottom).mousedown(function (e) {
height = that.height();
width = that.width();
leftBottomx = e.pageX;
leftBottomy = e.pageY
leftBottomdown = true
top1 = that.position().top;
left1 = that.position().left;
});
var rightTopx = ""
var rightTopy = ""
var rightTopdown = false
var top2 = "";
var left2 = "";
$(rightTop).mousedown(function (e) {
height = that.height();
width = that.width();
rightTopx = e.pageX;
rightTopy = e.pageY
rightTopdown = true
top2 = that.position().top;
left2 = that.position().left;
});
var rightBottomx = ""
var rightBottomy = ""
var rightBottomdown = false
var top3 = "";
var left3 = "";
$(rightBottom).mousedown(function (e) {
height = that.height();
width = that.width();
rightBottomx = e.pageX;
rightBottomy = e.pageY
rightBottomdown = true
top3 = that.position().top;
left3 = that.position().left;
});
var borderx = ""
var bordery = ""
var borderdown = false
var top4 = "";
var left4 = "";
$(border).mousedown(function (e) {
height = that.height();
width = that.width();
borderx = e.pageX;
bordery = e.pageY
borderdown = true
top4 = that.position().top;
left4 = that.position().left;
});
$(document).mouseup(function (e) {
leftBottomdown = false
leftTopdown = false
rightTopdown = false
rightBottomdown = false
borderdown = false
});
$(".vmobile").mousemove(function (e) {
if (leftTopdown) {
var x = e.pageX - leftTopx
var y = e.pageY - leftTopy
that.css("width", width - x).css("height", height - y)
that.css("top", top + y).css("left", left + x)
$.each(arrcommon, function (index, item) {
$("#target_" + item).val(that.css(item))
})
}
if (leftBottomdown) {
var x = e.pageX - leftBottomx
var y = e.pageY - leftBottomy
console.log(that.width() - x, that.height() - y);
that.css("width", width - x).css("height", height + y)
that.css("top", top1).css("left", left1 + x)
$.each(arrcommon, function (index, item) {
$("#target_" + item).val(that.css(item))
})
}
if (rightTopdown) {
var x = e.pageX - rightTopx
var y = e.pageY - rightTopy
that.css("width", width + x).css("height", height - y)
that.css("top", top2 + y).css("left", left2)
$.each(arrcommon, function (index, item) {
$("#target_" + item).val(that.css(item))
})
}
if (rightBottomdown) {
var x = e.pageX - rightBottomx
var y = e.pageY - rightBottomy
that.css("width", width + x).css("height", height + y)
that.css("top", top3).css("left", left3)
$.each(arrcommon, function (index, item) {
$("#target_" + item).val(that.css(item))
})
}
if (borderdown) {
var x = e.pageX - borderx
var y = e.pageY - bordery
that.css("top", top4 + y).css("left", left4 + x)
$.each(arrcommon, function (index, item) {
$("#target_" + item).val(that.css(item))
})
}
});
$.each(arrcommon, function (index, item) {
$("#target_" + item).val(that.css(item))
})
$("#target_id").val(that.attr("id"))
}
$("#createDiv").click(function () {
var div = document.createElement("div");
div.style.width = "180px"
div.style.height = "180px"
div.style.background = "gray"
div.style.border = "1px solid black";
div.style.position = "absolute";
div.style.left = "92px";
div.style.top = "92px";
var id = "handleId" + new Date().getTime()
div.setAttribute("id", id);
$(".vmobile").append(div)
$("#" + id).createBorder()
$("#" + id).addClass("mobileItem")
$("#" + id).click(function(){
$("#" + id).createBorder()
})
})
$("#submit").click(function () {
$(".handler").remove();
$.each(arrcommon, function (index, item) {
$("#"+$("#target_id").val()).css(item, $("#target_" + item).val())
})
})
$("#insertButton").click(function(){
$("#"+$("#target_id").val()).append("<img src='"+$("#insertimgurl").val()+"' style='100%;height:100%'>")
})
$(".animal").click(function(){
$("#"+$("#target_id").val()).addClass($(this).attr("name"))
})
var animal=['bounce','flash','pulse', 'rubberBand','shake','headShake','swing ']
</script>
</html>