<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置坐标</title>
<style>
/*组件 2704*624*/
.comp{
position: absolute;width:1920px;height:700px;left:0px;top:0px;overflow:hidden;
/*background-image:url("bg.png")*/
}
.bg_video,#bg_video{
position:absolute;;width:100%;height:100%;left:0px;top:0px;
}
.photos{position:absolute;width:10000px;height:100%;display:table-cell;opacity:0.9;}/*background-color: chartreuse;*/
/*各照片的工具栏 opacity:0.8;*/
.photo .toolbar{position: absolute;width:100%;height:20px !important;bottom:5px;display: block;background-color: #d7d7d7;}
.photo .toolbar .btn{float:left;height:20px;line-height:20px;font-size:10px;text-align:center;padding: 0 5px 0 5px;border:0px solid #FF0000;margin:0 4px;}
/*各照片*/
.photo{border:0px black solid;width:200px;height:200px;position:absolute;outline:none;user-select:none;/*overflow:hidden;*/;}
.photo:focus .s-show{display:block;}
/* 移动 */
.s-move-content-header{width:100%;height:30px;text-align:center;line-height:30px;}
.s-move-content-header:focus .s-show{display:block;}
/* 八个方位的div控制 display:none;*/
.s-move-content-direction{width:5px;height:5px;border:1px black solid;background-color:gray;position:absolute;display:none; }
.s-move-content-direction:focus{background-color: #FF00FF !important;}
/* 八个方位的小手各自的div */
.s-move-content-direction-n{cursor:n-resize;left:50%;top:-7px;margin-left:-4px;}/*上*/
.s-move-content-direction-ne{cursor:ne-resize;top:-7px;right:-7px;}/*右上*/
.s-move-content-direction-e{cursor:e-resize;top:50%;right:-7px;margin-top:-4px;}/*右*/
.s-move-content-direction-se{cursor:se-resize;bottom:-7px;right:-7px;}/*右下*/
.s-move-content-direction-s{cursor:s-resize;bottom:-10px !important;left:50%;margin-left:-4px;}/*向下*/
.s-move-content-direction-sw{cursor:sw-resize;left:-7px;bottom:-7px;}/*左下*/
.s-move-content-direction-w{cursor:w-resize;left:-7px;top:50%;margin-top:-4px;}/*左*/
.s-move-content-direction-nw{cursor:nw-resize;left:-7px;top:-7px;}/*左上*/
#debug{
position:absolute;left:20px;bottom:20px;width:1800px;height:40px;border: 0px solid #FF00FF;
}
#debug button{height:40px;line-height: 40px;padding:0 10px;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="hammer.min.js"></script>
</head>
<body>
<div class="comp"><!--组件-->
<video id="bg_video" src="bg.mp4" autoplay="autoplay" muted loop="loop" style="object-fit:fill;display:none;"></video>
<div id="photos" class="photos"><!--照片列表-->
</div>
</div>
<div id="debug">
<div style="float:left;width:600px;">
<button id="debugFileList">文件列表</button>
<button id="randomPos">随机布局</button>
<button id="autoSizeBaseHeight">更新宽度<!--（按宽高比）--></button>
<button id="autoSizeBaseWidth">更新高度<!--（按宽高比）--></button>
<button id="run">开始流动</button>
<button id="stop">停止流动</button>
</div>
<div style="float:left;width:1000px;" class="setting">
<div style="float:left;"><span style="margin-right:10px;">层级</span><input type="number" id="zindexValue" size="5"></div>
<div style="float:left;" id="photoInfo">
<span id="fileName" title="">-</span>
<span id="fileWidth" title="fileWidth">-</span>
<span id="fileHeight" title="fileHeight">-</span>
<span id="displayWidth" title="display width">-</span>
<span id="displayHeight" title="display height">-</span>
<span id="fileLeft" title="left">-</span>
<span id="fileTop" title="top">-</span>
<span id="zIndex" title="zIndex">-</span>
</div>
</div>
</div>
</body>
</html>
<script>
var u=window.u||{};
u.isArray=function(o) {
return typeof o=='object'&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()=='array';
};
/**
* 对json数组进行搜索
* @param {array} array [需要排序的数组]
* @param {string} type [需要检索的字段]
* @param {string} value [字段中应包含的值]
* @return {array} [包含指定信息的数组]
*/
u.search=function(array,type,value) {
if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
let arr=[];
arr=array.filter(function(a) {
return a[type] === value;
});
return arr;
};
/**
* 所有照片文件信息存储在data.fileList中
* 照片从左向右滚动，是通过不断改变其left坐标实现的
* 当照片的left到了照片层最右时，即一开始的left最大值，就移到在侧，达到无缝衔接
* 多个速度，是通过对照片取模，对left加不同的值实现
* */
//文件列表
let data = {"fileList": []}
data.fileList = [
{
"id": 0,
"filename": "0.png",
"left": 0, //坐标left
"top": 0, //坐标top
"width": 100, //显示的宽度
"height": 100, //显示的高度
"zIndex": 1, //照片显示层级
"photoWidth": 1468,//照片文件的宽度
"photoHeight": 889 //照片文件的高度
},
{
"id": 1,
"filename": "1.png",
"left": 0, //坐标left
"top": 0, //坐标top
"width": 100, //显示的宽度
"height": 100, //显示的高度
"zIndex": 1, //照片显示层级
"photoWidth": 1468,//照片文件的宽度
"photoHeight": 889 //照片文件的高度
},
{
"id": 2,
"filename": "2.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 2,
"photoWidth": 1244,
"photoHeight": 852
},
{
"id": 3,
"filename": "3.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 3,
"photoWidth": 382,
"photoHeight": 491
},
{
"id": 4,
"filename": "4.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 4,
"photoWidth": 1337,
"photoHeight": 851
},
{
"id": 5,
"filename": "5.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 5,
"photoWidth": 1302,
"photoHeight": 783
},
{
"id": 6,
"filename": "6.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 6,
"photoWidth": 351,
"photoHeight": 486
},
{
"id": 7,
"filename": "7.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 7,
"photoWidth": 1462,
"photoHeight": 934
},
{
"id": 8,
"filename": "8.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 8,
"photoWidth": 944,
"photoHeight": 623
},
{
"id": 9,
"filename": "9.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 9,
"photoWidth": 1454,
"photoHeight": 930
},
{
"id": 10,
"filename": "10.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 10,
"photoWidth": 1224,
"photoHeight": 825
},
{
"id": 11,
"filename": "11.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 11,
"photoWidth": 651,
"photoHeight": 928
},
{
"id": 12,
"filename": "12.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 12,
"photoWidth": 650,
"photoHeight": 929
},
{
"id": 13,
"filename": "13.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 13,
"photoWidth": 641,
"photoHeight": 903
},
{
"id": 14,
"filename": "14.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 14,
"photoWidth": 1054,
"photoHeight": 729
},
{
"id": 15,
"filename": "15.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 15,
"photoWidth": 1054,
"photoHeight": 737
},
{
"id": 16,
"filename": "16.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 16,
"photoWidth": 1168,
"photoHeight": 745
},
{
"id": 17,
"filename": "17.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 17,
"photoWidth": 1376,
"photoHeight": 943
},
{
"id": 18,
"filename": "18.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 18,
"photoWidth": 1244,
"photoHeight": 847
},
{
"id": 19,
"filename": "19.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 19,
"photoWidth": 1166,
"photoHeight": 776
},
{
"id": 20,
"filename": "20.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 20,
"photoWidth": 1178,
"photoHeight": 776
},
{
"id": 21,
"filename": "21.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 21,
"photoWidth": 1314,
"photoHeight": 855
},
{
"id": 22,
"filename": "22.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 22,
"photoWidth": 1102,
"photoHeight": 756
},
{
"id": 23,
"filename": "23.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 23,
"photoWidth": 1466,
"photoHeight": 961
},
{
"id": 24,
"filename": "24.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 24,
"photoWidth": 1326,
"photoHeight": 858
},
{
"id": 25,
"filename": "25.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 25,
"photoWidth": 1464,
"photoHeight": 963
},
{
"id": 26,
"filename": "26.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 26,
"photoWidth": 522,
"photoHeight": 719
},
{
"id": 27,
"filename": "27.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 27,
"photoWidth": 1335,
"photoHeight": 849
},
{
"id": 28,
"filename": "28.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 28,
"photoWidth": 1352,
"photoHeight": 851
},
{
"id": 29,
"filename": "29.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 29,
"photoWidth": 1352,
"photoHeight": 851
},
{
"id": 30,
"filename": "30.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 30,
"photoWidth": 1350,
"photoHeight": 849
},
{
"id": 31,
"filename": "31.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 31,
"photoWidth": 1201,
"photoHeight": 836
},
{
"id": 32,
"filename": "32.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 32,
"photoWidth": 1224,
"photoHeight": 839
},
{
"id": 33,
"filename": "33.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 33,
"photoWidth": 1218,
"photoHeight": 841
},
{
"id": 34,
"filename": "34.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 34,
"photoWidth": 1224,
"photoHeight": 842
},
{
"id": 35,
"filename": "35.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 35,
"photoWidth": 1467,
"photoHeight": 950
},
{
"id": 36,
"filename": "36.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 36,
"photoWidth": 1451,
"photoHeight": 961
},
{
"id": 37,
"filename": "37.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 37,
"photoWidth": 1423,
"photoHeight": 960
},
{
"id": 38,
"filename": "38.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 38,
"photoWidth": 1219,
"photoHeight": 756
},
{
"id": 39,
"filename": "39.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 39,
"photoWidth": 1382,
"photoHeight": 955
},
{
"id": 40,
"filename": "40.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 40,
"photoWidth": 1140,
"photoHeight": 757
},
{
"id": 41,
"filename": "41.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 41,
"photoWidth": 1050,
"photoHeight": 790
},
{
"id": 42,
"filename": "42.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 42,
"photoWidth": 1200,
"photoHeight": 764
},
{
"id": 43,
"filename": "43.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 43,
"photoWidth": 1161,
"photoHeight": 759
},
{
"id": 44,
"filename": "44.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 44,
"photoWidth": 1154,
"photoHeight": 757
},
{
"id": 45,
"filename": "45.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 45,
"photoWidth": 1083,
"photoHeight": 756
},
{
"id": 46,
"filename": "46.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 46,
"photoWidth": 1073,
"photoHeight": 759
},
{
"id": 47,
"filename": "47.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 47,
"photoWidth": 1041,
"photoHeight": 756
},
{
"id": 48,
"filename": "48.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 48,
"photoWidth": 1090,
"photoHeight": 758
},
{
"id": 49,
"filename": "49.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 49,
"photoWidth": 1116,
"photoHeight": 755
},
{
"id": 50,
"filename": "50.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 50,
"photoWidth": 1145,
"photoHeight": 759
},
{
"id": 51,
"filename": "51.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 51,
"photoWidth": 1413,
"photoHeight": 853
},
{
"id": 52,
"filename": "52.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 52,
"photoWidth": 1204,
"photoHeight": 806
},
{
"id": 53,
"filename": "53.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 53,
"photoWidth": 835,
"photoHeight": 595
},
{
"id": 54,
"filename": "54.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 54,
"photoWidth": 848,
"photoHeight": 592
},
{
"id": 55,
"filename": "55.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 55,
"photoWidth": 1171,
"photoHeight": 806
},
{
"id": 56,
"filename": "56.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 56,
"photoWidth": 1163,
"photoHeight": 806
},
{
"id": 57,
"filename": "57.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 57,
"photoWidth": 1162,
"photoHeight": 805
},
{
"id": 58,
"filename": "58.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 58,
"photoWidth": 1186,
"photoHeight": 802
},
{
"id": 59,
"filename": "59.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 59,
"photoWidth": 1457,
"photoHeight": 936
},
{
"id": 60,
"filename": "60.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 60,
"photoWidth": 1263,
"photoHeight": 850
},
{
"id": 61,
"filename": "61.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 61,
"photoWidth": 1284,
"photoHeight": 862
},
{
"id": 62,
"filename": "62.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 62,
"photoWidth": 1300,
"photoHeight": 860
},
{
"id": 63,
"filename": "63.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 63,
"photoWidth": 1352,
"photoHeight": 863
},
{
"id": 64,
"filename": "64.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 64,
"photoWidth": 985,
"photoHeight": 648
},
{
"id": 65,
"filename": "65.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 65,
"photoWidth": 1111,
"photoHeight": 677
},
{
"id": 66,
"filename": "66.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 66,
"photoWidth": 1101,
"photoHeight": 677
},
{
"id": 67,
"filename": "67.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 67,
"photoWidth": 1076,
"photoHeight": 680
},
{
"id": 68,
"filename": "68.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 68,
"photoWidth": 1068,
"photoHeight": 674
},
{
"id": 69,
"filename": "69.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 69,
"photoWidth": 1218,
"photoHeight": 769
},
{
"id": 70,
"filename": "70.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 70,
"photoWidth": 1307,
"photoHeight": 863
},
{
"id": 71,
"filename": "71.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 71,
"photoWidth": 1275,
"photoHeight": 857
},
{
"id": 72,
"filename": "72.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 72,
"photoWidth": 1361,
"photoHeight": 899
},
{
"id": 73,
"filename": "73.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 73,
"photoWidth": 1364,
"photoHeight": 904
},
{
"id": 74,
"filename": "74.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 74,
"photoWidth": 1328,
"photoHeight": 916
},
{
"id": 75,
"filename": "75.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 75,
"photoWidth": 1324,
"photoHeight": 913
},
{
"id": 76,
"filename": "76.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 76,
"photoWidth": 1293,
"photoHeight": 913
},
{
"id": 77,
"filename": "77.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 77,
"photoWidth": 1299,
"photoHeight": 922
},
{
"id": 78,
"filename": "78.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 78,
"photoWidth": 1272,
"photoHeight": 892
},
{
"id": 79,
"filename": "79.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 79,
"photoWidth": 1006,
"photoHeight": 680
},
{
"id": 80,
"filename": "80.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 80,
"photoWidth": 1388,
"photoHeight": 932
},
{
"id": 81,
"filename": "81.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 81,
"photoWidth": 1075,
"photoHeight": 742
},
{
"id": 82,
"filename": "82.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 82,
"photoWidth": 497,
"photoHeight": 632
},
{
"id": 83,
"filename": "83.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 83,
"photoWidth": 2032,
"photoHeight": 2409
},
{
"id": 84,
"filename": "84.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 84,
"photoWidth": 540,
"photoHeight": 648
},
{
"id": 85,
"filename": "85.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 85,
"photoWidth": 537,
"photoHeight": 635
},
{
"id": 86,
"filename": "86.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 86,
"photoWidth": 533,
"photoHeight": 628
},
{
"id": 87,
"filename": "87.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 87,
"photoWidth": 540,
"photoHeight": 649
},
{
"id": 88,
"filename": "88.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 88,
"photoWidth": 539,
"photoHeight": 639
},
{
"id": 89,
"filename": "89.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 89,
"photoWidth": 527,
"photoHeight": 637
},
{
"id": 90,
"filename": "90.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 90,
"photoWidth": 528,
"photoHeight": 634
},
{
"id": 91,
"filename": "91.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 91,
"photoWidth": 534,
"photoHeight": 641
},
{
"id": 92,
"filename": "92.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 92,
"photoWidth": 533,
"photoHeight": 642
},
{
"id": 93,
"filename": "93.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 93,
"photoWidth": 538,
"photoHeight": 637
},
{
"id": 94,
"filename": "94.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 94,
"photoWidth": 537,
"photoHeight": 645
},
{
"id": 95,
"filename": "95.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 95,
"photoWidth": 533,
"photoHeight": 635
},
{
"id": 96,
"filename": "96.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 96,
"photoWidth": 537,
"photoHeight": 643
},
{
"id": 97,
"filename": "97.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 97,
"photoWidth": 540,
"photoHeight": 650
},
{
"id": 98,
"filename": "98.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 98,
"photoWidth": 535,
"photoHeight": 634
},
{
"id": 99,
"filename": "99.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 99,
"photoWidth": 536,
"photoHeight": 641
},
{
"id": 100,
"filename": "100.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 100,
"photoWidth": 536,
"photoHeight": 637
},
{
"id": 101,
"filename": "101.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 101,
"photoWidth": 532,
"photoHeight": 641
},
{
"id": 102,
"filename": "102.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 102,
"photoWidth": 532,
"photoHeight": 641
},
{
"id": 103,
"filename": "103.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 103,
"photoWidth": 535,
"photoHeight": 641
},
{
"id": 104,
"filename": "104.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 104,
"photoWidth": 646,
"photoHeight": 915
},
{
"id": 105,
"filename": "105.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 105,
"photoWidth": 646,
"photoHeight": 906
},
{
"id": 106,
"filename": "106.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 106,
"photoWidth": 647,
"photoHeight": 911
},
{
"id": 107,
"filename": "107.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 107,
"photoWidth": 646,
"photoHeight": 918
},
{
"id": 108,
"filename": "108.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 108,
"photoWidth": 639,
"photoHeight": 909
},
{
"id": 109,
"filename": "109.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 109,
"photoWidth": 1349,
"photoHeight": 911
},
{
"id": 110,
"filename": "110.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 110,
"photoWidth": 1387,
"photoHeight": 927
},
{
"id": 111,
"filename": "111.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 111,
"photoWidth": 1374,
"photoHeight": 928
},
{
"id": 112,
"filename": "112.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 112,
"photoWidth": 1354,
"photoHeight": 921
},
{
"id": 113,
"filename": "113.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 113,
"photoWidth": 828,
"photoHeight": 537
},
{
"id": 114,
"filename": "114.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 114,
"photoWidth": 712,
"photoHeight": 517
},
{
"id": 115,
"filename": "115.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 115,
"photoWidth": 770,
"photoHeight": 540
},
{
"id": 116,
"filename": "116.png",
"left": 0,
"top": 0,
"width": 100,
"height": 100,
"zIndex": 116,
"photoWidth": 929,
"photoHeight": 610
}
]
//console.log('data.fileList',data.fileList)
let currPhotoId = 0 //当前操作的照片id
var maxRight = 0 //最后一个照片的left，这个值在初始化时获取，作为无缝衔接的临界，即超过这个就被移到另一头
let inter = 0 //定时器
let start = 0 //是否开始动画
let rafId = 0 //requestAnimationFrame的返回值
for (let i=0;i<data.fileList.length;i++){
getImageInfo(data.fileList[i].id,'photos2/'+data.fileList[i].filename,function(id,w,h){
//console.log(w,h)
let s=u.search(data.fileList,'id',id);
//console.table(s);
s[0].photoWidth = w
s[0].photoHeight = h
})
}
//生成html
function createDom(){
let str = ''
for (let i=0;i<data.fileList.length;i++){
let divWidth = 100
let divHeight = (100/data.fileList[i].photoWidth) * data.fileList[i].photoHeight
str += '<div class="photo" tabIndex="2" id="photo-'+data.fileList[i].id+'" photoWidth="'+data.fileList[i].photoWidth+'" photoHeight="'+data.fileList[i].photoHeight+'" dataId="'+data.fileList[i].id+'" style="left:'+data.fileList[i].left+'px;top:'+data.fileList[i].top+'px;z-index:0;width:'+divWidth+'px;height:'+divHeight+'px;'+'">'
str += ' <div class="s-move-content-header" tabIndex="1" dataId="'+data.fileList[i].id+'"><!--div2-->'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-n"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-ne"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-e"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-se"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-s"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-sw"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-w"></a>'
str += ' <a class="s-move-content-direction s-show s-move-content-direction-nw"></a>'
str += ' </div>'
str += ' <div class="content" dataId="'+data.fileList[i].id+'" style="position:absolute;left:0;top:0;width:100%;height:100%;background-image: url(photos2/'+i+'.png);background-size: 100% 100%;">'
//str += '<br>filename:'+data.fileList[i].filename
//str += '<br>zIndex:'+data.fileList[i].zIndex
str += '</div>'
str += '</div>'
//更新文件列表中的显示宽度和高度
data.fileList[i].width = divWidth
data.fileList[i].height = parseInt(divHeight)
}
let photoList = document.getElementById('photos')
photoList.innerHTML = str //追加到dom
}
//createDom() //文件列表到html
randomDo() //随机布局
//监控页面上所有div点击事件（点击某个组件时，触发此事件，ele[0]就是当前组件对象）
let allPhotos = $(".photo").mousedown(function(e) {
let ele = $(this);
//console.log(allPhotos);//拥有photo类的对象，也就是和组件的个数一致
//console.log(ele[0]);//返回的是当前点击的对象，也就是当前组件
document.onmousemove = function(e){
addMoveContentControl(ele[0],e);
}
//console.log(ele[0]);//返回的是当前点击的对象，也就是当前组件
let dataId = $(e)[0].target.attributes.dataid.nodeValue;
let s=u.search(data.fileList,'id',Number(dataId));//从照片列表中查到此照片对象
currPhotoId = dataId //当前操作的照片的id
//信息栏显示
$('#fileName').html(s[0].filename)
$('#fileWidth').html(s[0].photoWidth)
$('#fileHeight').html(s[0].photoHeight)
$('#displayWidth').html(s[0].width)
$('#displayHeight').html(s[0].height)
$('#fileLeft').html(s[0].left)
$('#fileTop').html(s[0].top)
$("#zIndex").html(s[0].zIndex)
$("#zindexValue").val(s[0].zIndex)
});
//在照片上鼠标弹起
$(".photo").mouseup(function(e){
console.log('up')
})
//在照片上鼠标按下
$(".photo").mousedown(function(e) {
let ele = $(this);
console.log(ele[0]);
});
//这个是做什么用的，需要倒着去理解，唉，可能就是为了存数据的时候，看着整齐吧
let space = {
move : { // [移动]
content : { // [移动备注框]
width : 200, // 默认div的宽度
height : 200, // 默认div的高度
top : 0 , // 默认div的距离头部距离
right : 0 , // 默认div的距离右侧距离
bottom : 0 , // 默认div的距离底部距离
left : 0 , // 默认div的距离左侧距离
moveHeight : 30 , // 默认头部高度
textareaHeight : 170, // 默认textarea的高度
min : 100 , // div宽度高度不能小于min
buttomTarget : null, // 鼠标按下之后的target
moveTarget : null // 鼠标按下之后移动的target（就是当前组件）
}
}
}
/**
* @para divEle 最大的div
* @para e 鼠标事件
*/
function addMoveContentSuper(divEle,e){
// 缩小保护
this.min = space.move.content.min;//==100
// 所有元素
this.divEle = divEle;
this.textEle = divEle.lastElementChild; // testArea element
// 最大div的style
this.divStyle = this.divEle.style;
this.divWidth = this.divStyle.width;
this.divHeight = this.divStyle.height;
this.divTop = this.divStyle.top;
this.divRight = this.divStyle.right;
this.divBottom = this.divStyle.bottom;
this.divLeft = this.divStyle.left;
// 头部移动高度
//this.hreadHeight = space.move.content.moveHeight;
// textarray的style
//this.textStyle = this.textEle.style;
// 鼠标事件event
this.e = e;
this.x = e.movementX;
this.y = e.movementY;
this.moveTarget = space.move.content.moveTarget; // 正在移动的target
// 修改属性的值
// [这里以后就不用再if判断了,就连html里的标签都是js生成的直接用js赋值宽度就行]
this.divWidth = (this.divWidth === "") ?
space.move.content.width : parseInt(this.divWidth.replace("px",""));
this.divHeight = (this.divHeight === "") ?
space.move.content.height : parseInt(this.divHeight.replace("px",""));
this.divTop = (this.divTop === "") ?
space.move.content.top : parseInt(this.divTop.replace("px",""));
this.divRight = (this.divRight === "") ?
space.move.content.right : parseInt(this.divRight.replace("px",""));
this.divBottom = (this.divBottom === "") ?
space.move.content.bottom : parseInt(this.divBottom.replace("px",""));
this.divLeft = (this.divLeft === "") ?
space.move.content.left : parseInt(this.divLeft.replace("px",""));
}
/**
* 添加移动框的 移动 && 放大 && 缩小 && 斜拉
* 元素组织最大一层 div → 移动层 → 八个小方位
* @param {[divElement]} divEle [需要移动的div,最外层的div]
* @param {[EventObject]} e [event type='move']
* @return {[void]}
*/
function addMoveContentControl(divEle,e){
//console.log(e);
if(e.buttons !== 1){ // 当鼠标没有按下则不走方法（左键1,中键4,右键2）
space.move.content.moveTarget = null; // //就是当前组件，没按下就没有当前组件
return;
}else if(space.move.content.moveTarget === null){ // 当鼠标按下了,movetarget为空则赋值
space.move.content.moveTarget = e.target; // 这里利用了成员变量 获得触发事件的元素
}
var move = divEle; // 获取移动元素
var direction = divEle.getElementsByClassName("s-move-content-direction"); // 获取所有拉伸的节点
switch(space.move.content.moveTarget){
case move : new addMoveContentMove(divEle,e,move); break; // 头部移动
case direction[0] : new addMoveContentTop(divEle,e,direction[0]); break; // 上拉伸
case direction[1] : new addMoveContentRightTop(divEle,e,direction[1]); break; // 右上拉伸
case direction[2] : new addMoveContentRight(divEle,e,direction[2]); break; // 右拉伸
case direction[3] : new addMoveContentRightButtom(divEle,e,direction[3]); break; // 右下拉伸
case direction[4] : new addMoveContentButtom(divEle,e,direction[4]); break; // 下拉伸
case direction[5] : new addMoveContentLeftButtom(divEle,e,direction[5]); break; // 左下拉伸
case direction[6] : new addMoveContentLeft(divEle,e,direction[6]); break; // 左拉伸
case direction[7] : new addMoveContentLeftTop(divEle,e,direction[7]); break; // 左上拉伸
default : new addMoveContentMove(divEle,e,move); break;
}
}
//拖动照片
function addMoveContentMove(divEle,e,thisEle){ // 移动
addMoveContentSuper.apply(this,arguments);
var top = this.divTop + this.y;
var left = this.divLeft + this.x;
this.divStyle.top = top + "px";
this.divStyle.left = left + "px";
//更新照片列表中的坐标
let dataId = $(e)[0].target.attributes.dataid.nodeValue;
let s=u.search(data.fileList,'id',Number(dataId));//从照片列表中查到此照片对象
s[0].left = left
s[0].top = top
}
//向上拉伸
function addMoveContentTop(divEle,e,thisEle){ // 向上拉伸
addMoveContentSuper.apply(this,arguments);
var top = this.divTop;
var height = this.divHeight + (-this.y);
if(height < this.min)
height = this.min;
else
top = this.divTop + this.y;
this.divStyle.top = top + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
// 右上拉伸
function addMoveContentRightTop(divEle,e,thisEle){ // 右上拉伸
addMoveContentSuper.apply(this,arguments);
var top = this.divTop;
var width = this.divWidth + this.x;
var height = this.divHeight + (-this.y);
if(height < this.min)
height = this.min;
if(width < this.min)
width = this.min;
else
top = this.divTop + this.y;
this.divStyle.top = top + "px";
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
// 右侧拉伸
function addMoveContentRight(divEle,e,thisEle){ // 右侧拉伸
addMoveContentSuper.apply(this,arguments);//addMoveContentSuper(divEle,e)这里会进行一些处理
//console.log(this.x);//-5 -4 -1 0 1 2 3 等值，向左拉是负数，向右拉是正数
var width = this.divWidth + this.x;//宽度，几百
if(width < this.min)
width = this.min;
this.divStyle.width = width + "px";//拉宽.拉窄组件
}
//右下拉伸
function addMoveContentRightButtom(divEle,e,thisEle){ // 右下拉伸
addMoveContentSuper.apply(this,arguments);
let width = this.divWidth + this.x;
let height = this.divHeight + this.y;
if(height < this.min)
height = this.min;
if(width < this.min)
width = this.min;
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
/*
console.log(e)
//获取到当前操作的图片id
let id = e.target.parentNode.parentNode.attributes.id.nodeValue
id = Number(id)
if (id) {
//更新数据
let s=u.search(data.fileList,'id',id);
s[0].width = width
s[0].height = height
}else{
console.log('id=',id)
}
*/
}
//向下拉伸
function addMoveContentButtom(divEle,e,thisEle){ // 向下拉伸
addMoveContentSuper.apply(this,arguments);
var height = this.divHeight + this.y;
if(height < this.min)
height = this.min;
this.textStyle.height = (height - this.hreadHeight) + "px";
this.divStyle.height = height + "px";
//更新数据
//let s=u.search(data.fileList,'id',Number(idValue));
//console.log(idValue,s)
//s[0].height = height
}
//左下拉伸
function addMoveContentLeftButtom(divEle,e,thisEle){ // 左下拉伸
addMoveContentSuper.apply(this,arguments);
var left = this.divLeft;
var width = this.divWidth + (-this.x);
var height = this.divHeight + this.y;
if(height < this.min)
height = this.min;
if(width < this.min)
width = this.min;
else
left = this.divLeft + this.x;
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.divStyle.left = left + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
//向左拉伸
function addMoveContentLeft(divEle,e,thisEle){ // 向左拉伸
addMoveContentSuper.apply(this,arguments);
var left = this.divLeft;
var width = this.divWidth + (-this.x);
if(width < this.min)
width = this.min;
else
left = this.divLeft + this.x;
this.divStyle.left = left + "px";
this.divStyle.width = width + "px";
}
//左上拉伸
function addMoveContentLeftTop(divEle,e,thisEle){ // 左上拉伸
addMoveContentSuper.apply(this,arguments);//JavaScript 函数 Apply,apply() 方法与 call() 方法非常相似
var top = this.divTop;
var left = this.divLeft;
var width = this.divWidth + (-this.x);
var height = this.divHeight + (-this.y);
if(height < this.min)
height = this.min;
else
top = this.divTop + this.y;
if(width < this.min)
width = this.min;
else
left = this.divLeft + this.x;
this.divStyle.top = top + "px";
this.divStyle.left = left + "px";
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
/**
* 点击工具栏的置顶和置底按钮
* */
$('body').on("click",'.btn',function(e){
console.log(e.target.attributes.act.nodeValue)
let act = e.target.attributes.act.nodeValue
if (act == 'top'){
console.log('置顶')
}else if (act == 'bottom'){
console.log('置底')
}
});
//获取水平最大尺寸（自动调节容器）
maxRight = Math.max.apply(Math, data.fileList.map(function(o) {
return o.left;
}))
console.log('maxRight=',maxRight);// 40
$('.photos').css('width',maxRight+'px')
//获取最右侧的照片的left坐标
function getMaxLeft(){
Math.max.apply(Math, data.fileList.map(function(o) {
return o.left;
}))
}
//获取纵向最大尺寸（自动调节容器）
let maxTop = Math.max.apply(Math, data.fileList.map(function(o) {
return o.top;
}))
//console.log(maxTop);// 40
//获取zIndex的最大值
//搜索id
let s=u.search(data.fileList,'id',1);
//console.table(s[0]);
s[0].photoWidth = 1234
s[0].photoHeight = 5678
//console.table(s);
//遍历所有图片，获取原始尺寸
for (let i=0;i<data.fileList.length;i++){
getImageInfo(data.fileList[i].id,'photos2/'+data.fileList[i].filename,function(id,w,h){
// console.log(w,h)
let s=u.search(data.fileList,'id',id);
// console.table(s);
s[0].photoWidth = w
s[0].photoHeight = h
})
}
/**
* 获取图片原始尺寸
* */
function getImageInfo(id,url, callback) {
let img = new Image();
img.src = url;
if (img.complete) {
// 如果图片被缓存，则直接返回缓存数据
callback(id,img.width, img.height);
} else {
img.onload = function () {
callback(id,img.width, img.height);
}
}
}
//导出json数据
$('body').on("click",'#debugFileList',function(){
console.table(data.fileList)
});
//更新宽度(以高为基础，按宽高比更新宽度)
$('body').on("click",'#autoSizeBaseHeight',function(){
for (let i=0;i<data.fileList.length;i++){
//不知道为什么拖动时更新的高度经常不对
let height = $('#photos').find('div[dataid='+data.fileList[i].id+']').height()
data.fileList[i].height = height //更新文件列表中的高度，使其和dom中的一致
let bl = data.fileList[i].height/data.fileList[i].photoHeight //显示高度和文件高度的比例
let w = data.fileList[i].photoWidth * bl //显示宽度=文件宽度*比例
$('#photos').find('div[dataid='+data.fileList[i].id+']').css({'width':w+'px'}) //高度不变，自动调整宽度
}
});
//更新高度(以宽为基础，按宽高比更新高度)
$('body').on("click",'#autoSizeBaseWidth',function(){
for (let i=0;i<data.fileList.length;i++){
//不知道为什么拖动时更新的宽度经常不对
let width = $('#photos').find('div[dataid='+data.fileList[i].id+']').width()
data.fileList[i].width = width //更新文件列表中的高度，使其和dom中的一致
let bl = data.fileList[i].width/data.fileList[i].photoWidth //显示宽度和文件宽度的比例
let h = data.fileList[i].photoHeight * bl //显示高度=文件高度*比例
$('#photos').find('div[dataid='+data.fileList[i].id+']').css({'height':h+'px'}) //宽度不变，自动调整高度
}
});
//点击工具栏按钮
$('body').on("click",'.btn',function(){
let dataId = $(this).parent().parent().attr('dataid')
let act = $(this).attr('act')
alert(act + ',' +dataId)
});
//修改当前照片的层级
$('body').on("change",'#zindexValue',function(){
console.log(currPhotoId)
let s=u.search(data.fileList,'id',Number(currPhotoId));//从照片列表中查到此照片对象
s[0].zIndex = $(this).val() //input改变时，设置文件列表中的值
//层级改变应用到dom上
$('#photos').find('div[dataid='+currPhotoId+']').css({'z-index':$(this).val()})
});
/**
* 开始流动
* */
$('body').on("click",'#run',function(){
if (rafId){
console.log('rafId=',rafId)
return false;
}
console.log('开始流动')
//先整体向左移500
for (let i=0;i<data.fileList.length;i++){
let newLeft = data.fileList[i].left - 500
$('#photo-'+(i+1)).css('left',newLeft+'px')
data.fileList[i].left = newLeft
}
//获取最右侧的照片的left坐标
maxRight = Math.max.apply(Math, data.fileList.map(function(o) {
return o.left;
})) //整体偏移后重新获取右侧的边界（其实只要原值-500就行，不需要遍历去取了）
rafId = requestAnimationFrame(animloop);
});
/**
* 遍历所有照片，修改各照片的left实现向右滚动
* 按各种条件分别对left加不同的速度值，实现多种速度
* */
function render(){
for (let i=0;i<data.fileList.length;i++){
if (data.fileList[i].left > (maxRight)){
data.fileList[i].left = data.fileList[i].left - maxRight - 500
}else{
let newLeft = 0
if (data.fileList[i].id % 3 == 0){
newLeft = data.fileList[i].left + 2 //这些速度要快一点
}else{
newLeft = data.fileList[i].left + 1
}
$('#photo-'+(i+1)).css('left',newLeft+'px')
data.fileList[i].left = newLeft
}
}
}
/*
直接开始循环动画
(function animloop() {
render();
rafId = requestAnimationFrame(animloop);
})()
*/
/**
* 循环动画
*
* */
function animloop() {
render();
rafId = requestAnimationFrame(animloop);
}
/**
* 停止流动
* */
$('body').on("click",'#stop',function() {
console.log('停止流动')
//inter = window.clearInterval(inter)
cancelAnimationFrame(rafId)
rafId = 0 //
})
/**
* 点击按钮，应用随机位置
* */
$('body').on("click","#randomPos",randomDo)
/**
*
*
* */
function randomDo(){
//各照片左上的X坐标和Y坐标
let xList = [] //116个
let yList = [] //116个
//横向区间，用于生成横向随机坐标
for (let i=0;i<1000;i++){
xList.push(i*20)
}
console.log('xList',xList)
//纵向区间，用于生成纵向随机坐标
for (let i=0;i<10;i++){
yList.push(i*100)
}
console.log('yList',yList)
//横向随机数序列(对应116个left坐标值)
let leftList = []
for (let i=0;i<data.fileList.length;i++){
console.log(xList[i], xList[i+1])
leftList.push(random_num(xList[i], xList[i+1]))
}
//console.log(leftList)
//纵向随机数序列
let topList = []
for (let i=0;i<data.fileList.length;i++){
//console.log(yList[i], yList[i+1])
let y = random_num(0, 5)
topList.push(random_num(yList[y], yList[y+1]))
}
//console.log(topList)
for (let i=0;i<data.fileList.length;i++){
data.fileList[i].left = leftList[i]
data.fileList[i].top = topList[i]
}
//console.log(data)
//$('#photos').empty()
createDom()
}
//生成指定范围内的随机数
function random_num(min, max) {
// 如果非数字则报错
if (typeof min !== 'number' || typeof max !== 'number')
throw new Error('param invalidate,should be a number')
// 如果顺序有问题则互换位置
if (min > max) {
[min, max] = [max, min]
}
// 如果二者相等则返回一个
if (min === max) {
return min
}
return Math.floor(Math.random() * (max - min + 1)) + min
}
</script>
浙公网安备 33010602011771号