Nieuw lid |
|
Hallo,
ik ben wat aan het aankloten en hoop dat ik duidelijk kan overbrengen wat ik wil:
Ik heb dit javascript gevonden op internet waarmee ik een <p> schuivend kan vergroten met een mousover. in een <p> kan ik niet zoveel stoppen (divjes enzo). nu zou ik graag een divje kunnen vergroten met dit script, het mooie van dit script is dat het schuift.
Javascript
if (document.getElementById && document.getElementsByTagName) {
if (window.addEventListener) window.addEventListener('load', initAnims, false);
else if (window.attachEvent) window.attachEvent('onload', initAnims);
}
function initAnims() {
// Init size animation with memory, both directions
var animElements = document.getElementById("resizercontainer").getElementsByTagName("p")
for(var i=0; i<animElements.length; i++) {
animElements[i].onmouseover = heightChange;
animElements[i].onmouseout = heightRestore;
}
function heightChange() {
if (!this.currentheight) this.currentheight = 45; //if no mem is set, set it first;
doheightChangeMem(this,this.currentheight,150,10,10,0.333);
}
function heightRestore() {
if (!this.currentheight) return; //avoid error if mouseout an element occurs before the mosueover
//(e.g. the pointer already in the object when onload)
doheightChangeMem(this,this.currentheight,45,10,10,0.5);
}
}
//*******************
function doheightChangeMem(elem,startheight,endheight,steps,intervals,powr) {
//height changer with Memory by www.hesido.com
if (elem.heightChangeMemInt) window.clearInterval(elem.heightChangeMemInt);
var actStep = 0;
elem.heightChangeMemInt = window.setInterval(
function() {
elem.currentheight = easeInOut(startheight,endheight,steps,actStep,powr);
elem.style.height = elem.currentheight+"px";
actStep++;
if (actStep > steps) window.clearInterval(elem.heightChangeMemInt);
}
,intervals)
}
//*******************
function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
//Generic Animation Step Value Generator By www.hesido.com
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
return Math.ceil(stepp)
}
if (document.getElementById && document.getElementsByTagName) { if (window.addEventListener) window.addEventListener('load', initAnims, false); else if (window.attachEvent) window.attachEvent('onload', initAnims); } function initAnims() { // Init size animation with memory, both directions var animElements = document.getElementById("resizercontainer").getElementsByTagName("p") for(var i=0; i<animElements.length; i++) { animElements[i].onmouseover = heightChange; animElements[i].onmouseout = heightRestore; } function heightChange() { if (!this.currentheight) this.currentheight = 45; //if no mem is set, set it first; doheightChangeMem(this,this.currentheight,150,10,10,0.333); } function heightRestore() { if (!this.currentheight) return; //avoid error if mouseout an element occurs before the mosueover //(e.g. the pointer already in the object when onload) doheightChangeMem(this,this.currentheight,45,10,10,0.5); } } //******************* function doheightChangeMem(elem,startheight,endheight,steps,intervals,powr) { //height changer with Memory by www.hesido.com if (elem.heightChangeMemInt) window.clearInterval(elem.heightChangeMemInt); var actStep = 0; elem.heightChangeMemInt = window.setInterval( function() { elem.currentheight = easeInOut(startheight,endheight,steps,actStep,powr); elem.style.height = elem.currentheight+"px"; actStep++; if (actStep > steps) window.clearInterval(elem.heightChangeMemInt); } ,intervals) } //******************* function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) { //Generic Animation Step Value Generator By www.hesido.com var delta = maxValue - minValue; var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta); return Math.ceil(stepp) }
html
<style type="text/css">
#resizercontainer {
clear: both;
}
#resizercontainer p {
height: 45px;
width: 800px;
text-align: center;
margin: 0px;
background-color: #BEDAF1;
}
</style>
<div id="resizercontainer">
<p style="height: 45px; overflow:hidden;">
<img src="http://www.urbanhieroglyphics.nl/new/data/images/header_top.gif" />
<img src="http://www.urbanhieroglyphics.nl/new/data/images/header_text.gif" />
</p>
</div>
#resizercontainer { clear: both; } #resizercontainer p { height: 45px; width: 800px; text-align: center; margin: 0px; background-color: #BEDAF1; } <div id="resizercontainer"> <p style="height: 45px; overflow:hidden;"> <img src="http://www.urbanhieroglyphics.nl/new/data/images/header_top.gif" /> <img src="http://www.urbanhieroglyphics.nl/new/data/images/header_text.gif" />
hmm tja hoop dat het duidelijk is, thnx
|