动画平台

<!DOCTYPE html>

<html>

<head>

<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>

</head>

<body>

</div>

<div>

选中元素样式

<div>

<br>

</div>

<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>

</body>

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>