Con este fabuloso codigo, lograremos dominar nuestro Fondo a nuestro Gusto.
Para empezar vamos a pegar la Libreria JS y el Css
Cita:
<script src="http://www.egrappler.com/contents/smartspin/demo/smartspinner.js" type="text/javascript"</script>
<link type="text/css" rel="stylesheet" href="http://www.egrappler.com/contents/smartspin/demo/smartspinner.css" />
en el editor HTML o en Por Ensima de la Pagina.
Y Ahora pegaremos la Funcion/efecto de este Codigo .
Cita: <script type="text/javascript">
$(document).ready(function() {
var s = $('#red').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Red', callback: onred });
$('#green').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Green', callback: ongreen });
$('#blue').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Blue', callback: onblue });
var r = 40, g = 40, b = 40;
function onred(val) {
r = val;
changeColor();
}
function ongreen(val) {
g = val;
changeColor();
}
function onblue(val) {
b = val;
changeColor();
}
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}
function RGB2Color(r, g, b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function changeColor() {
var color = RGB2Color(r, g, b);
$('body').css('background-color', color);
}
});
</script>
debajo de la libreria js y el codigo css.
Y Finalmente el codigo Html
Cita: <div id="canvas" style="position: relative; width: 500px; height: 100%; margin: auto;">
<div style="width: 100%; height: 100px; padding-top: 50px; padding-left: 20px"> </div>
<div style="padding-left: 70px;"><input type="text" class="smartspinner" id="red" /> <input type="text" class="smartspinner" id="green" /> <input type="text" class="smartspinner" id="blue" /></div>
</div>
que hara aparecer la Herramienta de colores .
Y Haci terminamos.
Para ver una Vista Previa :
http://pruevasbrianpwg.es.tl/stilosenfondos.htm
Fuente :
www.greepit.com/
Saludos
BrianPwg |
