Jump to content
Sign in to follow this  
NameException

Efeitos nos cantos

Recommended Posts

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...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.