最新动画平台

zoukankan html css js c++ java

最新动画平台

<!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="https://m.imooc.com/static/wap/static/common/js/jquery-2.1.0.min_ac9f840.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;

}

body {

padding: 30px;

}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

<link rel="stylesheet" href="layui.css">

</head>

<body>

<div class="con">

<div id="vmobile" class="vmobile">

</div>

<div class="handlerCon">

<div class="layui-row">

<div class="layui-col-xs6">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

<legend>创建容器</legend>

</fieldset>

<button id="createDiv" type="button" class="layui-btn">创建容器</button>

<input id="target_id" type="hidden">

<table class="layui-table">

<tr>

<td><label>高度</label></td>

<td><input class="layui-input" id="target_height"></td>

</tr>

<tr>

<td><label>宽度</label></td>

<td> <input class="layui-input" id="target_width"></td>

</tr>

<tr>

<td><label>左边距</label></td>

<td><input class="layui-input" id="target_left"></td>

</tr>

<tr>

<td><label>顶边距</label></td>

<td><input class="layui-input" id="target_top"></td>

</tr>

<tr>

<td><label>背景</label></td>

<td><input class="layui-input" id="target_background"></td>

</tr>

<tr>

<td><label>圆角</label></td>

<td><input class="layui-input" id="target_border-radius"></td>

</tr>

<tr>

<td><label>边框</label></td>

<td><input class="layui-input" id="target_border"></td>

</tr>

<tr>

<td> <label>层级</label></td>

<td><input class="layui-input" id="target_z-index"></td>

</tr>

<tr>

<td colspan="2"><button class="layui-btn" id="submit">确定</button></td>

</tr>

</table>

</div>

<div class="layui-col-xs6">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

<legend>插入图片</legend>

</fieldset>

<input class="layui-input" id="insertimgurl" type="text" placeholder="请输入图片链接">

<br>

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

<br>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

<legend>给元素添加动画</legend>

</fieldset>

<div id="animalCon"></div>

<br>

<br>

<button id="removeanimal" class="layui-btn">清除动画</button>

<br>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

<legend>生成页面</legend>

</fieldset>

<button onclick="createHtml()" class="layui-btn">生成页面</button>

<br>

<br>

<textarea class="layui-textarea" name="desc" id="code"></textarea>

</div>

</div>

</div>

</div>

</div>

</body>

<script>

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

查看全文

相关阅读:
【笔记】黄如花.信息检索.学习心得
 【心得】Lattice和Xilinx工具关键特性对比（Diamond、ISE）
【导航】FPGA相关
 【笔记】黄如花.信息检索.前4章心得（新增大牛汇总的公开课资源）
python正则表达式练习题
 python正则表达式(1)--特殊字符
 【转】什么时候 i = i + 1 并不等于 i += 1？
Linux查看文件指定行数内容
 python mysqldb批量执行语句executemany
linux命令行常用快捷键

原文地址：https://www.cnblogs.com/liuhao-web/p/11457372.html