Søg
Avatar billede s0mmer Nybegynder
09. oktober 2008 - 20:41 Der er 14 kommentarer og
1 løsning

Borsen billedescript

Godaften eksperter,

Jeg ønsker at lave en ligende effekt som på www.borsen.dk ude i højre side på billedlinksne. Altså en gardineffekt på billeder med tekst.

Kan i hjælpe.. hvilken slags script er der tale om ? Evt links til eksempel, download?

Beklager hvis denne ikke hører ind under javascript.
Avatar billede olebole Juniormester
09. oktober 2008 - 20:47 #1
<ole>

Udfra kildekoden at dømme er det lavet med jQuery (som jeg iøvrigt ikke kan anbefale). Effekten kan meget vel være lavet ved en sammenstrikning af flere libraries - og jeg orker ikke at sidde og lede flere tusinde JS-kodelinjer igennem  =)

/mvh
</bole>
Avatar billede jensgram Nybegynder
09. oktober 2008 - 20:56 #2
Men noget lignende kan da kodes ret simpelt...

<a>
  <img />
  <div style="position: absolute" />
</a>

Og så evt. et par linier til at "animere"
Avatar billede s0mmer Nybegynder
09. oktober 2008 - 23:09 #3
jensgram > uddyb venligst.. animationen samt teksten?
Avatar billede jensgram Nybegynder
11. oktober 2008 - 16:50 #4
Phhhh - ja, HTML'en ovenfor er strukturen - så er det bare om at smide noget billedtekst i DIV'en og knytte en event til A'en...
Avatar billede s0mmer Nybegynder
13. oktober 2008 - 10:13 #5
jensgram > kom venligst med et konkret eksempel..
Avatar billede jensgram Nybegynder
14. oktober 2008 - 18:20 #6
Nu er det næppe verdens pæneste kode (da jeg ikke er en haj til JS), men det virkede da jeg brugte noget tilsvarende...

Idéen er, at jeg først lader DIV'en have "display" for at beregne dens endelige højde og derefter tildeler den højden 0.

--

HTML:

<a onmouseover="ib2_expandCollapse();" onmouseout="ib2_expandCollapse();">
  <img />
  <div id="infobox2" style="position: absolute" />
</a>



JS:

var ib2_isExpanded = true;
var ib2_heightCollapsed = 0;
var ib2_heightExpanded;
var ib2_elmBox;

function ib2_expandCollapse() {
    ib2_resizeTowards(ib2_isExpanded ? ib2_heightCollapsed : ib2_heightExpanded);
    ib2_isExpanded = !ib2_isExpanded;
}

function ib2_resizeTowards(targetHeight, hideWhenFinished) {
    curHeight = ib2_elmBox.offsetHeight;
    if (curHeight < targetHeight) { // Expanding
        nextHeight = Math.min(targetHeight, curHeight + 8);
    } else { // Collapsing
        nextHeight = Math.max(targetHeight, curHeight - 12);
    }
   
    // Resize ... and continue if target is not met
    ib2_elmBox.style.height = nextHeight + 'px';
    if (nextHeight != targetHeight) {
        window.setTimeout('ib2_resizeTowards(' + targetHeight + ', ' + hideWhenFinished + ');', 25);
    } else if (hideWhenFinished) {
        ib2_elmBox.style.visibility = 'hidden';
    }
}

function ib2_close() {
    ib2_resizeTowards(1, true);
}

function ib2_init() {
    ib2_elmBox = document.getElementById('infobox2');
    ib2_heightExpanded = ib2_elmBox.offsetHeight;
   
    ib2_elmBox.style.height = 0;
    ib2_elmBox.style.visibility = 'visible';
   
    ib2_isExpanded = false;
    ib2_resizeTowards(ib2_heightCollapsed, false);
}

window.onload = ib2_init;


--

Det kan sikkert gøres nemmere ... og ovenstående er nok heller ikke copy-paste til dit formål (har dog selv brugt det til noget ret lignende).

- Jens
Avatar billede jensgram Nybegynder
14. oktober 2008 - 18:20 #7
Hov - close-funktionen kan du godt slette :)
Avatar billede s0mmer Nybegynder
15. oktober 2008 - 16:32 #8
Min kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/JavaScript">

var ib2_isExpanded = true;
var ib2_heightCollapsed = 0;
var ib2_heightExpanded;
var ib2_elmBox;

function ib2_expandCollapse() {
    ib2_resizeTowards(ib2_isExpanded ? ib2_heightCollapsed : ib2_heightExpanded);
    ib2_isExpanded = !ib2_isExpanded;
}

function ib2_resizeTowards(targetHeight, hideWhenFinished) {
    curHeight = ib2_elmBox.offsetHeight;
    if (curHeight < targetHeight) { // Expanding
        nextHeight = Math.min(targetHeight, curHeight + 8);
    } else { // Collapsing
        nextHeight = Math.max(targetHeight, curHeight - 12);
    }
   
    // Resize ... and continue if target is not met
    ib2_elmBox.style.height = nextHeight + 'px';
    if (nextHeight != targetHeight) {
        window.setTimeout('ib2_resizeTowards(' + targetHeight + ', ' + hideWhenFinished + ');', 25);
    } else if (hideWhenFinished) {
        ib2_elmBox.style.visibility = 'hidden';
    }
}

function ib2_init() {
    ib2_elmBox = document.getElementById('infobox2');
    ib2_heightExpanded = ib2_elmBox.offsetHeight;
   
    ib2_elmBox.style.height = 0;
    ib2_elmBox.style.visibility = 'visible';
   
    ib2_isExpanded = false;
    ib2_resizeTowards(ib2_heightCollapsed, false);
}

window.onload = ib2_init;
</script>
</head>

<body>
<a onmouseover="ib2_expandCollapse();" onmouseout="ib2_expandCollapse();">
  <img src="images/profil_dennisn.jpg">
  <div id="infobox2" style="position: absolute" />
</a>
</body>
</html>

- Men intet kører når jeg kører over billedet. kan du hjælpe jensgram?
Avatar billede jensgram Nybegynder
15. oktober 2008 - 17:20 #9
Hmm - tjah, lidt. Men der skal da stadig rettes lidt, hvis det hele skal spille. Nu har du dog lidt at starte med:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/JavaScript">

var ib2_isExpanded = true;
var ib2_heightCollapsed = 0;
var ib2_heightExpanded;
var ib2_elmBox;

function ib2_expandCollapse() {
    ib2_resizeTowards(ib2_isExpanded ? ib2_heightCollapsed : ib2_heightExpanded);
    ib2_isExpanded = !ib2_isExpanded;
}

function ib2_resizeTowards(targetHeight, hideWhenFinished) {
    curHeight = ib2_elmBox.offsetHeight;
    if (curHeight < targetHeight) { // Expanding
        nextHeight = Math.min(targetHeight, curHeight + 8);
    } else { // Collapsing
        nextHeight = Math.max(targetHeight, curHeight - 12);
    }
 
    // Resize ... and continue if target is not met
    ib2_elmBox.style.height = nextHeight + 'px';
    if (nextHeight != targetHeight) {
        window.setTimeout('ib2_resizeTowards(' + targetHeight + ', ' + hideWhenFinished + ');', 25);
    } else if (hideWhenFinished) {
        ib2_elmBox.style.visibility = 'hidden';
    }
}

function ib2_init() {
    ib2_elmBox = document.getElementById('infobox2');
    ib2_heightExpanded = ib2_elmBox.offsetHeight;
 
    ib2_elmBox.style.height = 0;
    ib2_elmBox.style.visibility = 'visible';
 
    ib2_isExpanded = false;
    ib2_resizeTowards(ib2_heightCollapsed, false);
}

window.onload = ib2_init;
</script>
</head>

<body>
<a style="display: block; position: relative" href="#" onmouseover="ib2_expandCollapse();" onmouseout="ib2_expandCollapse();">
  <img style="position: absolute" src="http://www.jensgram.dk/gfx/jensgram2007.jpg" />
  <div id="infobox2" style="visibility: hidden; position: absolute; background: red; overflow: hidden">Her er noget tekst<br />Og mere...</div>
</a>
</body>
</html>
Avatar billede s0mmer Nybegynder
15. oktober 2008 - 21:41 #10
jensgram > Jaa nu er vi sku tæt på. Hvad nu hvis jeg vil have den ramme der kommer ned til at have en bestemt bredde og ikke kun afhængig af teksten? Eks 390px bred. Og kan man ændre hastigheden på animationen?
Avatar billede jensgram Nybegynder
15. oktober 2008 - 22:47 #11
Bredden sætter du i <div style="...">

Hastigheden kan ændres i:

    if (curHeight < targetHeight) { // Expanding
        nextHeight = Math.min(targetHeight, curHeight + 8);
    } else { // Collapsing
        nextHeight = Math.max(targetHeight, curHeight - 12);
    }


Hvor "8" er forøgelsen (i pixels) ved hver iteration ved åbning - "12" er den tilsvarende værdi ved lukning.

Alternativt kan du ændre iterationslængden ("25"):

window.setTimeout('ib2_resizeTowards(' + targetHeight + ', ' + hideWhenFinished + ');', 25);
Avatar billede s0mmer Nybegynder
16. oktober 2008 - 20:24 #12
jensgram > Yes har fået den til at virke.. Dog har jeg lagt mærke til at hvis man kører musen ind i billedet fra siden og ud af billedet øverst.. Så bliver teksten der største delen af gangene. Har du nogen anelse om hvorfor? Og kan det rettes?
Avatar billede jensgram Nybegynder
16. oktober 2008 - 20:38 #13
Ja, der er noget rod, når man "forlader" billedet via tekstfeltet. Det er noget med onmouseout-eventen, men da jeg ikke selv brugte scriptet til netop denne opgave, har jeg ikke sat mig ind i, hvordan det evt. skal løses. Desværre.
Avatar billede s0mmer Nybegynder
16. oktober 2008 - 23:58 #14
jensgram > Det er helt okay.. Men du skal have mange tak for hjælpen :) Send svar så får du points
Avatar billede jensgram Nybegynder
17. oktober 2008 - 07:49 #15
Ok - god fornøjelse med tilretning :) Og god weekend.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
IT-JOB
Seneste spørgsmål Seneste aktivitet
24/0417:35 Kan ikke resette PC med Windows 8.1 Af TTA i Office & Kontorpakker
24/0413:33 Lukning af Microsoftkonto Af ErikHg i Windows
23/0416:10 Bat file. Af johnnylassen i Andet programmering
23/0410:28 “Signe” Svindel omtalt i medier Af nu_igen i Mobiltelefoner
22/0420:59 RAID controller virker ikke ved tilslutning af alle 4 harddiske Af Strawberry i Andet hardware
White papers
Flere white papers »