temu客户端程序
This commit is contained in:
commit
4aaf264e89
694 files changed
+263780
No files matched your search
Vendored
+228
@@ -0,0 +1,228 @@
|
||||
function initDragHtml() {
|
||||
|
||||
var img_htmls='<div class="item_content" id="imageChange"><ul>';
|
||||
$("#main_image .clear_both").remove();
|
||||
$("#main_image #over").remove();
|
||||
$("#main_image #imageChange").remove();
|
||||
var dic = new Array();
|
||||
$("#main_image").children().each(function () {
|
||||
var inHtml = $(this).html();
|
||||
var index = $(this).attr("index");
|
||||
dic[index] = inHtml;
|
||||
});
|
||||
dic = dic.filter(d=>d);
|
||||
|
||||
if(dic.length === 0) {
|
||||
$("#main_image").children().each(function () {
|
||||
var inHtml = $(this).html();
|
||||
if ($(this).html().indexOf('<ul><li>') >= 0) {
|
||||
var img_html = '<li><div class="item">';
|
||||
img_html += inHtml;
|
||||
img_html += '</div></li>';
|
||||
img_htmls += img_html;
|
||||
} else {
|
||||
var img_html = '<li><div class="item"><ul><li>';
|
||||
img_html += inHtml;
|
||||
img_html += '</li></ul></div></li>';
|
||||
img_htmls += img_html;
|
||||
}
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
var sortRes = Object.keys(dic).sort(function(a,b){ return a - b; });
|
||||
for (var key in sortRes) {
|
||||
if(dic[sortRes[key]].indexOf('<ul><li>') >= 0) {
|
||||
var img_html = '<li><div class="item" index=' + key + '>';
|
||||
img_html += dic[sortRes[key]];
|
||||
img_html += '</div></li>';
|
||||
img_htmls += img_html;
|
||||
}
|
||||
else {
|
||||
var img_html = '<li><div class="item" index=' + key + '><ul><li>';
|
||||
img_html += dic[sortRes[key]];
|
||||
img_html += '</li></ul></div></li>';
|
||||
img_htmls += img_html;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
img_htmls +='</ul></div>';
|
||||
$("#main_image").html(img_htmls);
|
||||
|
||||
initDragImg();
|
||||
|
||||
$("#main_image").children().each(function(){
|
||||
//debugger;
|
||||
$(this).html;
|
||||
})
|
||||
|
||||
img_htmls = '<div class="over" id="over" style="display: none;">' +
|
||||
'<p style="width:100%;height:100%;background-color: #000000;opacity:0.5;z-index:3333;"></p>' +
|
||||
'<input type="button" class="pre_page" style="position: absolute;top:50%;left:2%;z-index:5555;font-size: 20px;width: 100px;height: 50px;background-color: #FFFFFFF;border-radius: 5%; margin-right: 50px;" value="上一张"/>' +
|
||||
'<img src="" style="width:600px;position: absolute;top:10%;left:20%;z-index:5555;" id="over_img"/>' +
|
||||
'<input type="hidden" id="over_img_index" value="0"/>' +
|
||||
'<input type="button" class="past_page" style="position: absolute;top:50%;right:2%;z-index:5555;font-size: 20px;width: 100px;height: 50px;background-color: #FFFFFFF;border-radius: 5%; " value="下一张"/>' +
|
||||
'</div>';
|
||||
$("#main_image").append(img_htmls);
|
||||
img_htmls = '<div class="clear_both" style="clear: both;">' +
|
||||
'</div>';
|
||||
$("#main_image").append(img_htmls);
|
||||
}
|
||||
|
||||
function initDragImg(){
|
||||
|
||||
$("#main_image .item").each(function(i) {
|
||||
this.init = function() { // 初始化 this为item
|
||||
this.box = $(this).parent();//li
|
||||
|
||||
for (var j = 0; j < 200; j++) {
|
||||
var imgIdStr = 'id="img' + j + '"';
|
||||
|
||||
if($(this).html().indexOf(imgIdStr) >= 0) {
|
||||
$(this).attr("id", 'image' + j);
|
||||
if($(this).attr("index") === undefined) {
|
||||
$(this).attr("index", j);
|
||||
}
|
||||
$(this).css({
|
||||
position : "absolute",
|
||||
left : this.box.offset().left,
|
||||
//top:80
|
||||
top : this.box.offset().top
|
||||
}).appendTo("#main_image");
|
||||
}
|
||||
}
|
||||
|
||||
this.drag();
|
||||
},
|
||||
this.move = function(callback) { // 移动
|
||||
$(this).stop(true).animate({
|
||||
left : this.box.offset().left,
|
||||
top : this.box.offset().top
|
||||
}, 500, function() {
|
||||
if(callback) {
|
||||
callback.call(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
this.collisionCheck = function() {
|
||||
var currentItem = this;
|
||||
var direction = null;
|
||||
$(this).siblings(".item").each(function() {
|
||||
if (currentItem.pointer.x > this.box.offset().left &&
|
||||
currentItem.pointer.y > this.box.offset().top - $(document).scrollTop() &&
|
||||
(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
|
||||
(currentItem.pointer.y < this.box.offset().top - $(document).scrollTop() + this.box.height())) {
|
||||
// 返回对象和方向
|
||||
// if(currentItem.box.offset().top < this.box.offset().top) {
|
||||
// direction = "down";
|
||||
// } else if(currentItem.box.offset().top > this.box.offset().top) {
|
||||
// direction = "up";
|
||||
// } else {
|
||||
direction = "normal";
|
||||
//}
|
||||
this.swap(currentItem, direction);
|
||||
}
|
||||
});
|
||||
},
|
||||
this.swap = function(currentItem, direction) { // 交换位置
|
||||
if(this.moveing) return false;
|
||||
var directions = {
|
||||
normal : function() {
|
||||
var saveBox = this.box;
|
||||
this.box = currentItem.box;
|
||||
currentItem.box = saveBox;
|
||||
this.move();
|
||||
$(this).attr("index", this.box.index());
|
||||
$(currentItem).attr("index", currentItem.box.index());
|
||||
},
|
||||
down : function() {
|
||||
// 移到上方
|
||||
var box = this.box;
|
||||
var node = this;
|
||||
var startIndex = currentItem.box.index();
|
||||
var endIndex = node.box.index();
|
||||
for(var i = endIndex; i > startIndex ; i--) {
|
||||
var prevNode = $("#main_image .item[index="+ (i - 1) +"]")[0];
|
||||
node.box = prevNode.box;
|
||||
$(node).attr("index", node.box.index());
|
||||
node.move();
|
||||
node = prevNode;
|
||||
}
|
||||
currentItem.box = box;
|
||||
$(currentItem).attr("index", box.index());
|
||||
},
|
||||
up : function() {
|
||||
// 移到上方
|
||||
var box = this.box;
|
||||
var node = this;
|
||||
var startIndex = node.box.index();
|
||||
var endIndex = currentItem.box.index();
|
||||
for(var i = startIndex; i < endIndex; i++) {
|
||||
var nextNode = $("#main_image .item[index="+ (i + 1) +"]")[0];
|
||||
node.box = nextNode.box;
|
||||
$(node).attr("index", node.box.index());
|
||||
node.move();
|
||||
node = nextNode;
|
||||
}
|
||||
currentItem.box = box;
|
||||
$(currentItem).attr("index", box.index());
|
||||
}
|
||||
}
|
||||
directions[direction].call(this);
|
||||
},
|
||||
this.drag = function() { // 拖拽
|
||||
var oldPosition = new Position();
|
||||
var oldPointer = new Pointer();
|
||||
var isDrag = false;
|
||||
var currentItem = null;
|
||||
$(this).mousedown(function(e) {
|
||||
e.preventDefault();
|
||||
oldPosition.left = $(this).position().left;
|
||||
oldPosition.top = $(this).position().top;
|
||||
oldPointer.x = e.clientX;
|
||||
oldPointer.y = e.clientY;
|
||||
isDrag = true;
|
||||
|
||||
currentItem = this;
|
||||
});
|
||||
$(document).mousemove(function(e) {
|
||||
var currentPointer = new Pointer(e.clientX, e.clientY);
|
||||
if(!isDrag) return false;
|
||||
$(currentItem).css({
|
||||
"opacity" : "0.8",
|
||||
"z-index" : 999
|
||||
}) ;
|
||||
var left = currentPointer.x - oldPointer.x + oldPosition.left;
|
||||
var top = currentPointer.y - oldPointer.y + oldPosition.top;
|
||||
$(currentItem).css({
|
||||
left : left,
|
||||
top : top
|
||||
}) ;
|
||||
currentItem.pointer = currentPointer;
|
||||
// 开始交换位置
|
||||
currentItem.collisionCheck();
|
||||
}) ;
|
||||
$(document).mouseup(function() {
|
||||
if(!isDrag) return false ;
|
||||
isDrag = false ;
|
||||
currentItem.move(function() {
|
||||
$(this).css({
|
||||
"opacity" : "1",
|
||||
"z-index" : 0
|
||||
}) ;
|
||||
}) ;
|
||||
}) ;
|
||||
}
|
||||
this.init() ;
|
||||
}) ;
|
||||
}
|
||||
function Pointer(x, y) {
|
||||
this.x = x ;
|
||||
this.y = y ;
|
||||
}
|
||||
function Position(left, top) {
|
||||
this.left = left ;
|
||||
this.top = top ;
|
||||
}
|
||||
Reference in new issue
Block a user