最新動畫平臺

時間 2019-11-09

標籤最新動畫平臺简体版

原文原文鏈接

<!DOCTYPE html>

<html>

<head>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

padding: 30px;

}

.a img {

width: 100%;

height: 100%;

}

.a {

position: absolute;

top: 50px;

left: 50px;

width: 100px;

height: 100px;

background: gray;

position: absolute;

}

.b {

position: absolute;

top: 250px;

left: 250px;

width: 100px;

height: 100px;

background: gray;

position: absolute;

}

.vmobile {

margin-left: 30px;

margin-top: 30px;

position: relative;

width: 375px;

height: 1667px;

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;

margin-left: 50px;

}

.mobileItem {

animation-duration: 3s;

animation-delay: .2s;

animation-iteration-count: infinite;

}

table td {

text-align: center

}

.layui-col-xs6 {

padding-left: 20px;

}

.animal {

margin-bottom: 10px;

}

</style>

</head>

<body>

</div>

</fieldset>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</fieldset>

<br>

<button class="layui-btn" id="insertButton">肯定插入圖片</button>

<br>

<legend>給元素添加動畫</legend>

</fieldset>

<br>

<br>

</fieldset>

<br>

</div>

</body>

var animal =

'bounce,flash,pulse,rubberBand,shake,headShake,swing,tada,wobble,jello,bounceIn,bounceInDown,bounceInLeft,bounceInRight,bounceInUp,bounceOut,bounceOutDown,bounceOutLeft,bounceOutRight,bounceOutUp,fadeIn,fadeInDown,fadeInDownBig,fadeInLeft,fadeInLeftBig,fadeInRight,fadeInRightBig,fadeInUp,fadeInUpBig,fadeOut,fadeOutDown,fadeOutDownBig,fadeOutLeft,fadeOutLeftBig,fadeOutRight,fadeOutRightBig,fadeOutUp,fadeOutUpBig,flipInX,flipInY,flipOutX,flipOutY,lightSpeedIn,lightSpeedOut,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,rotateOut,rotateOutDownLeft,rotateOutDownRight,rotateOutUpLeft,rotateOutUpRight,hinge,jackInTheBox,rollIn,rollOut,zoomIn,zoomInDown,zoomInLeft,zoomInRight,zoomInUp,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,slideInDown,slideInLeft,slideInRight,slideInUp,slideOutDown,slideOutLeft,slideOutRight,slideOutUp,heartBeat';

var animalArr = animal.split(",");

var animalstr = "";

for (var ia = 0; ia < animalArr.length; ia++) {

animalstr += ' <button class="animal layui-btn layui-btn-primary layui-btn-xs" name="' + animalArr[ia] + '">' +

animalArr[ia] + '</button>';

};

$("#animalCon").html(animalstr);

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()).html("<img src='" + $("#insertimgurl").val() +

"' style='width:100%;height:100%'>");

});

$(".animal").click(function () {

; $("#" + $("#target_id").val()).removeClass().addClass('mobileItem').addClass($(this).attr("name"))

;})

$("#removeanimal").click(function () {

$("#" + $("#target_id").val()).removeClass().addClass('mobileItem');

});

function createHtml() {

$(".handler").remove();

var header = '<!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" />' +

'<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;} .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">' +

"<script>function resizing(){ var num = window.innerWidth;var font = num / 10;document.getElementsByTagName('html')[0].style.fontSize = font + 'px'} resizing(); window.onresize=function(){resizing()}<\/script>" +

'</head><body>';

var body = ($("#vmobile").html() + "").replace(/(\d+)px/g, function (a, b) {

return b / 37.5 + "rem";

});

var footer = "</body></html>";

$("#code").val(header + body + footer);

}

</script>

</html>

相關標籤/搜索

平臺

動畫

Bluemix創新平臺