images - transition javascript
jquery esquinas redondeadas (3)
Esto probablemente suene realmente estúpido, pero no tengo idea de cómo implementar las esquinas redondeadas de jquery ( http://www.methvin.com/jquery/jq-corner-demo.html ). Mi javascript-fu ha fallado por completo y parece que no puedo hacerlo funcionar en mi página. ¿Alguien puede mostrarme un ejemplo simple de HTML y JavaScript que usaría para que se muestren? Disculpas por mi idiotez.
- Esto no funciona en Safari y Google Chrome.
Necesitas incluir jquery.js en tu página. No te olvides de tener una etiqueta de cierre por separado.
<script type="text/javascript" src="jquery.js"></script>También debe incluir el archivo jQuery Corner Plugin JavaScript ( jquery.corner.js ) en su página.
<script type="text/javascript" src="jquery.corner.js"></script>En algún lugar de tu página debes tener el
<div>que quieres tener en las esquinas:<div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>En algún otro lugar de su página, preferiblemente no antes de la div en sí, emita el siguiente comando de JavaScript. Esto ejecutará la función interna cuando la página esté cargada y esté lista para ser manipulada.
<script type="text/javascript">$(function() { $(''#divToHaveCorners'').corner(); } );</script>¡Terminaste! Si no, házmelo saber.
1) Asegúrate de que jquery esté cargado 2) Asegúrate de que las esquinas estén cargadas 3) En la devolución de llamada lista, usa un selector para agarrar el div que deseas aplicar y llama al método de esquinas
$(document).ready(function() {
$("#idofdiv").corners();
});
jquery corners por Methvin http://www.methvin.com/jquery/jq-corner-demo.html están bien y funcionan bien, pero ... hay una alternativa más hermosa:
http://blue-anvil.com/jquerycurvycorners/test.html
puedes usar esa lib para hacer imágenes redondeadas incluso.
Y lo que es muy importante: - 18 de julio de 2008 - Ahora funciona en IE6,7, Safari y todos los demás navegadores modernos. Error de centrado fijo.
Por lo tanto, descargue jQuery Curvy Corners 2.0.2 Beta 3 desde:
http://code.google.com/p/jquerycurvycorners/downloads/list
y nuevamente debes cargar jquery core lib primero para que el ejemplo de tu HEAD pueda ser:
<head>
<script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(''.myClassName'').corner({
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 }
});
}
</script>
</head>
donde: tl, tr, bl, br son esquina superior izquierda, esquina superior derecha, etc.
a continuación, su área BODY:
y?y eso es :)
enlace a la imagen sobre:
http://img44.imageshack.us/img44/3638/corners.jpg
... y código listo para usar:
<html>
<head>
<script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(''.myClassName'').corner({
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 }
});
});
</script>
<style>
.myClassName
{
width:320px;
height:64px;
background-color:red;
text-align:center;
margin:auto;
margin-top:30px;
}
</style>
</head>
<body>
<div class="myClassName">content</div>
</body>
</html>
solo copia, pega, disfruta :)