118 lines
3.0 KiB
JavaScript
118 lines
3.0 KiB
JavaScript
$(document).ready(function(){
|
|
var _$users = $('div.user');
|
|
|
|
function init(){
|
|
|
|
wrapHTML();
|
|
getOutImages();
|
|
|
|
randomPosition($('div.user h1:first'));
|
|
randomPosition($('div.user h2:first'));
|
|
createLineHeader();
|
|
createLineContent();
|
|
createLineContentImages();
|
|
createLineImages();
|
|
}
|
|
|
|
function wrapHTML(){
|
|
_$users.each(function(){
|
|
var $header = $('<header />').append($('h1:first, h2:first', this));
|
|
$header.prependTo(this)
|
|
});
|
|
|
|
}
|
|
|
|
function getOutImages(){
|
|
$('div.user img').each(function(){
|
|
var cnt = $(this).parent('p').contents();
|
|
$(this).parent('p').replaceWith(cnt);
|
|
});
|
|
}
|
|
|
|
function createLineHeader(){
|
|
|
|
_$users.each(function(){
|
|
var h2Height = $(this).find('h2:first').outerHeight();
|
|
|
|
var h1Width = $(this).find('h1:first').outerWidth();
|
|
|
|
var x1 = $(this).find('h2:first').position().left + 50;
|
|
var y1 = $(this).find('h2:first').position().top + h2Height;
|
|
var x2 = $(this).find('h1:first').position().left + (h1Width / 2);
|
|
var y2 = $(this).find('h1:first').position().top;
|
|
// console.log(x1, x2, y1, y2);
|
|
var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
|
|
});
|
|
|
|
}
|
|
|
|
function createLineContent(){
|
|
_$users.each(function(){
|
|
var h1Height = $(this).find('h1:first').outerHeight();
|
|
// var h1Width = $(this).find('h1').outerWidth();
|
|
|
|
var x1 = $(this).find('h1:first').position().left + 50;
|
|
var y1 = $(this).find('h1:first').position().top + h1Height;
|
|
var x2 = $(this).find('.content').position().left;
|
|
var y2 = $(this).find('.content').position().top;
|
|
// console.log(x1, x2, y1, y2);
|
|
var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
|
|
});
|
|
}
|
|
|
|
function createLineContentImages(){
|
|
_$users.each(function(){
|
|
var contentHeight = $(this).find('.content').outerHeight();
|
|
// var h1Width = $(this).find('h1').outerWidth();
|
|
|
|
var x1 = $(this).find('.content').position().left;
|
|
var y1 = $(this).find('.content').position().top + contentHeight;
|
|
var x2 = $(this).find('.images').position().left + 100;
|
|
var y2 = $(this).find('.images').position().top + 10;
|
|
// console.log(x1, x2, y1, y2);
|
|
|
|
if($(this).find('.images').find('li').length){
|
|
var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function createLineImages(){
|
|
_$users.each(function(){
|
|
$(this).find('.images').find('li').each(function(){
|
|
var height = $(this).outerHeight();
|
|
var width = $(this).outerWidth();
|
|
|
|
if($(this).next().length){
|
|
// console.log($(this));
|
|
var x1 = $(this).position().left + width ;
|
|
var y1 = $(this).position().top + height + 15;
|
|
var x2 = $(this).next().position().left + width - 100;
|
|
var y2 = $(this).next().position().top + 16;
|
|
var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
|
|
// console.log(y1);
|
|
}
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
function randomPosition($element){
|
|
$element.each(function(){
|
|
var randomPos = Math.random() * (_$users.width()- $(this).width());
|
|
var width = $(this).width();
|
|
$(this).css({
|
|
'left': randomPos,
|
|
'width': width
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
|
|
init();
|
|
|
|
|
|
});
|