Wyrównanie pionowe div przy użyciu javascripts mootools

( 1 Vote )

JAVASCRIPTS:

// We add the "equalize" and "setRandom" methods to Elements
Elements.implement({

equalize: function(property){
var sum = 0, i, len;
len = i = this.length;
while (i--) sum += this[i].getDimensions()[property];
var average = Math.round(sum / len);
i = len;
while (i--) this.tween(property, average);
return this;
},

setRandom: function(property, min, max){
var i = this.length, value;
while (i--){
value = Math.round(min + (max - min) * Math.random());
this[i].tween(property, value);
}
return this;
}

});

window.addEvent('domready', function(){

var els = $$('div.element'), i = false;

$('link').addEvent('click', function(event){
event.stop();

i = !i

if (i) els.equalize('height');
else els.setRandom('height', 30, 150);
});
});

HTML:

<p><a id="link" href="#">Execute Example</a></p>

<div id="elements">
<div class="element"></div>
<div class="element"></div>
<div class="element otherElement"></div>
<div class="element otherElement"></div>
</div>

<h3>Code:</h3>
<pre>Elements.implement({

equalize: function(property){
var sum = 0, i, len;
len = i = this.length;
while (i--) sum += this[i].getDimensions()[property];
var average = Math.round(sum / len);
i = len;
while (i--) this.tween(property, average);
return this;
},

setRandom: function(property, min, max){
var i = this.length, value;
while (i--){
value = Math.round(min + (max - min) * Math.random());
this[i].tween(property, value);
}
return this;
}

});</pre>

<h3>Usage:</h3>
<pre>myElements.equalize(property);
myElements.setRandom(property, min, max);</pre>

CSS:

#elements {
overflow: hidden;
}

div.element {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: #f9f9f9;
float: left;
margin: 5px;
}

div.otherElement {
height: 20px;
}

pre {
padding: 5px 7px;
margin: 5px 0;
background: #f5f5f5;
border: 1px solid #ddd;
color: #333;
overflow: auto;
font-size: 12px;
}

 

 

 

Dodaj komentarz


Kod antysapmowy
Odśwież

DESIGN_BY