Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

NameException

Efeitos nos cantos

Mensagens Recomendadas

NameException

Boas...

Após alguma pesquisa na web encontrei os seguintes exemplos para diversificar os efeitos dos cantos das imagens, usando JAVASCRIPT. Mas gostava de pedir a vossa ajuda, na seguinte questão: o exemplo encontra-se programado para que o nome do efeito seja passado no conteúdo da tag div, pelo que se encontra sobreposto à imagem, o que não é de modo nenhum o que eu pretendo. Ou seja, como devo alterar o seguinte trecho de código de modo a que este deixe de mostrar o texto por cima da imagem?  :wallbash: Penso que seja este o script que está a realizar essa acção, pois ainda não estou muito familiarizado com a sintaxe do JAVASCRIPT...  :down:

<script type="text/javascript">
$(function(){
                          $('div.demo').each(function() { eval($('p', this).text());  });
                          $('#main p').wrap("<code></code>");
});
</script>

O CÓDIGO COMPLETO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {
    font: Verdana,Arial,sans-serif;
background: #f8f0e0;
}
div.section { clear: left; }
div.demo { 
    float: left; width: 18em; padding: 20px; margin: 1em;
    background-image:url(full-box.png); color:#000; text-align: center; font: verdana, arial, sans-serif;
}
div.fun  { margin: 2px; }
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
   $(function(){
        $('div.demo').each(function() { eval($('p', this).text());  });
        $('#main p').wrap("<code></code>");
    });
</script>
</head>
<body>
<div id="main">
    <div class="section">
    </div>
    <div class="demo"><h1>Round</h1> <p>$(this).corner();</p></div>
    <div class="demo"><h1>Bevel</h1> <p>$(this).corner("bevel");</p></div>
    <div class="demo"><h1>Notch</h1> <p>$(this).corner("notch");</p></div>
    <div class="demo"><h1>Bite</h1>  <p>$(this).corner("bite");</p></div>
    <div class="demo"><h1>Cool</h1>  <p>$(this).corner("cool");</p></div>
    <div class="demo"><h1>Sharp</h1> <p>$(this).corner("sharp");</p></div>
    <div class="demo"><h1>Slide</h1> <p>$(this).corner("slide");</p></div>
    <div class="demo"><h1>Jut</h1>   <p>$(this).corner("jut");</p></div>
    <div class="demo"><h1>Curl</h1>  <p>$(this).corner("curl");</p></div>
    <div class="demo"><h1>Tear</h1>  <p>$(this).corner("tear");</p></div>
    <div class="demo"><h1>Fray</h1>  <p>$(this).corner("fray");</p></div>
    <div class="demo"><h1>Wicked</h1><p>$(this).corner("wicked");</p></div>
    <div class="demo"><h1>Sculpt</h1><p>$(this).corner("sculpt");</p></div>
    <div class="demo"><h1>Long</h1>  <p>$(this).corner("long");</p></div>
    <div class="demo"><h1>Dog Ear</h1><p>$(this).corner("dog");</p></div>
    <div class="demo"><h1>Dog2</h1><p>$(this).corner("dog2");</p></div>
    <div class="demo"><h1>Dog3</h1><p>$(this).corner("dog3");</p></div>
</div>
</body>
</html>

/*
* jQuery corner plugin
* version 1.7 (1/26/2007)
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*/
jQuery.fn.corner = function(o) {
    function hex2(s) {
        var s = parseInt(s).toString(16);
        return ( s.length < 2 ) ? '0'+s : s;
    };
    function gpc(node) {
        for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode  ) {
            var v = jQuery.css(node,'backgroundColor');
            if ( v.indexOf('rgb') >= 0 ) { 
                rgb = v.match(/\d+/g); 
                return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
            }
            if ( v && v != 'transparent' )
                return v;
        }
        return '#ffffff';
    };
    function getW(i) {
        switch(fx) {
        case 'round':  return Math.round(width*(1-Math.cos(Math.asin(i/width))));
        case 'cool':   return Math.round(width*(1+Math.cos(Math.asin(i/width))));
        case 'sharp':  return Math.round(width*(1-Math.cos(Math.acos(i/width))));
        case 'bite':   return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
        case 'slide':  return Math.round(width*(Math.atan2(i,width/i)));
        case 'jut':    return Math.round(width*(Math.atan2(width,(width-i-1))));
        case 'curl':   return Math.round(width*(Math.atan(i)));
        case 'tear':   return Math.round(width*(Math.cos(i)));
        case 'wicked': return Math.round(width*(Math.tan(i)));
        case 'long':   return Math.round(width*(Math.sqrt(i)));
        case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
        case 'dog':    return (i&1) ? (i+1) : width;
        case 'dog2':   return (i&2) ? (i+1) : width;
        case 'dog3':   return (i&3) ? (i+1) : width;
        case 'fray':   return (i%2)*width;
        case 'notch':  return width; 
        case 'bevel':  return i+1;
        }
    };
    o = (o||"").toLowerCase();
    var keep = /keep/.test(o);                       // keep borders?
    var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]);  // corner color
    var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]);  // strip color
    var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width
    var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/;
    var fx = ((o.match(re)||['round'])[0]);
    var edges = { T:0, B:1 };
    var opts = {
        TL:  /top|tl/.test(o),       TR:  /top|tr/.test(o),
        BL:  /bottom|bl/.test(o),    BR:  /bottom|br/.test(o)
    };
    if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
        opts = { TL:1, TR:1, BL:1, BR:1 };
    var strip = document.createElement('div');
    strip.style.overflow = 'hidden';
    strip.style.height = '1px';
    strip.style.backgroundColor = sc || 'transparent';
    strip.style.borderStyle = 'solid';
    return this.each(function(index){
        var pad = {
            T: parseInt(jQuery.css(this,'paddingTop'))||0,     R: parseInt(jQuery.css(this,'paddingRight'))||0,
            B: parseInt(jQuery.css(this,'paddingBottom'))||0,  L: parseInt(jQuery.css(this,'paddingLeft'))||0
        };

        if (jQuery.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE
        if (!keep) this.style.border = 'none';
        strip.style.borderColor = cc || gpc(this.parentNode);
        var cssHeight = jQuery.curCSS(this, 'height');

        for (var j in edges) {
            var bot = edges[j];
            strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
            var d = document.createElement('div');
            var ds = d.style;

            bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);

            if (bot && cssHeight != 'auto') {
                if (jQuery.css(this,'position') == 'static')
                    this.style.position = 'relative';
                ds.position = 'absolute';
                ds.bottom = ds.left = ds.padding = ds.margin = '0';
                if (jQuery.browser.msie)
                    ds.setExpression('width', 'this.parentNode.offsetWidth');
                else
                    ds.width = '100%';
            }
            else {
                ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' : 
                                    (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';                
            }

            for (var i=0; i < width; i++) {
                var w = Math.max(0,getW(i));
                var e = strip.cloneNode(false);
                e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
                bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
            }
        }
    });
};

Desde já o meu obrigado...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.