Miyume

Usuario (México)

Primer post: 20 jun 2011Último post: 20 jun 2011

Posts

Puntos totales

Comentarios

Algunos Codigo para HTML con Códigos de Dynamic Driver

Apuntes Y MonografiasporAnónimo6/20/2011

Bueno estos son algunos codigos sacados de Dynamic Driver para HTML Archivo complementario con imagenes: http://actecsaeti.blogspot.com/2011/06/dynamic-driver-y-codigos-para-html.html Estos son algunos scripts que me gustaron asi como sus usos: a) Favicon: Un favicon es el icono que puede identificar a nuestra página por ejemplo: Ahora primeramente hay que crearlo para ello: 1.- Nos metemos en este link 2.- Seguimos las instrucciones, o pasos como se muestran en las capturas Ya creado el Favicon seguimos los siguientes pasos: 1.-Sube el archivo ("favicon.ico" a nuestra pagina 2.-Dentro de “HEAD” insertamos el código siguiente, así mismo a nuestras sub paginas: <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 3.- Como este recurso es “online” pudiera no estar de inmediato así que no hay que desesperarse b) Efecto de Murciélagos Volando: Primeramente este efecto tiene como “atributo especial” que se puede configurar el tiempo de visualización de los “murciélagos” recomendable para día de muertos, o paginas con temáticas paranormales o de terror Aquí el código: <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script language=JavaScript1.2>  </script></span> Xpos = 700; / / cupidos coordenadas x, en ypos pixel = 200; / / cupidos y coordina, en el paso pixel = 0.3; / / Velocidad de la animación (más pequeño es más lento) dismissafter = 15; / / segundos después de que Cupido debe desaparecer, en segundo var NS6 = document.getElementById & & document.all murciélagos = new Array (3) si (document.layers) {for! (i = 0; i <cantidad; i + +) {document.write ("<nombre de capa = n" + i + "LEFT = 0 =- TOP 50> <a href='http://www.dynamicdrive.com'> <IMG SRC = '" + Cupid.src + "' NAME = 'nsi' width = 69 height = 60 border = 0> </ a> </ LAYER> ";}} else if document.all (| | NS6) {document.write ('<div id =" a "style =" position: absolute; top: 0; a la izquierda: 0 "> <div id="in" style="position:relative"> '); for (i = 0; i <cantidad; i + +) {if (document.all) document.write (' <a href = "http://www.dynamicdrive.com"> <img src="'+Cupid.src+'" id="msieBats" style="position:absolute;top:-50;left:0" border=0> </ a> ') else document.write (' <a href="http://www.dynamicdrive.com"> <img src = "'+ + Cupid.src" id = "ns6Bats" + i + "" de ancho = 69 altura = 60 style = "position: absolute; top: -50; a la izquierda: 0" border = 0> </ a> ')} document.write (' </ div> </ div> ');} yBase = = xBase currStep a_count = = 0; b_count = 1; c_count = 2; d_count = 3; move = 1; if (document.layers | | NS6) {yBase = window.innerHeight / 3; xBase = window.innerWidth / 6 if (document.layers) window.captureEvents (Event.MOUSEMOVE);} if (document.all) {yBase = window.document.body.offsetHeight / 3; xBase = window.document.body.offsetWidth / 6;} function dismisscupid () {clearInterval (flycupid) si (document.layers) {for (I 2 = 0, i2 cantidad <; i2 + +). document.layers {['n' + i2] = visibilidad "ocultar"}} else if (documento . todos) document.all.out.style.visibility = "hidden" else if (NS6) document.getElementById ("out". style.visibility = "hidden"} if (document.layers) {for (i = 0 ; i <cantidad; i + +) document.layers ['n' + i] document.images ['nsi'] src = Cupid.src} else if (document.all) {for (i = 0;.. i cantidad < ; i + +) document.all.msieBats src = Cupid.src} else if (NS6) {for (i = 0;. i cantidad <;. i + +) document.getElementById ("ns6Bats" + i) src = Cupido . src} function Animar () {a_count + = mover; b_count + = mover; c_count + = mover; currStep + = paso; if (a_count> = bats.length) a_count = 0; if (b_count> = bats.length) b_count = 0; if (c_count> = bats.length) c_count = 0; if (document.layers) {for (i = 0; i <cantidad; i + +) {var NEWL = "n" + i document.layers = arriba. ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) document.layers . xpos izquierda = + xBase * Matemáticas. cos (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}} if (document.all) {for (i = 0; i <cantidad; i + +) {document.all.msieBats . style.pixelTop = ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) del documento . all.msieBats . style.pixelLeft = xpos + xBase Math.cos * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}} si (NS6) {for (i = 0; i <cantidad; i + +). {document.getElementById ("ns6Bats" + i) = style.top ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) document.getElementById ("ns6Bats" + i). style.left = xpos + xBase Math.cos * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}}} = flycupid setInterval ('Animate ()', 30); setTimeout ("dismisscupid ()", dismissafter * 1000) //--> </ script></span> c) Ojos Mirando: Este código es algo curioso aunque dentro de nuestro directorio base hay que tener las imágenes con los nombres “eye.gif” y pupils.gif” una imaben de unos ojos nos sigue y vigila si agregamos este código: <script language=JavaScript> //Watching Eyes script- By Kurt ([email protected]) //Script featured on Dynamic Drive //Visit http://www.dynamicdrive.com for this script and more pic0=new Image(); pic0.src="eye.gif"; pic1=new Image(); pic1.src="pupils.gif"; var n4=(document.layers); var n6=(document.getElementById&&!document.all); var ie=(document.all); var O=(navigator.appName.indexOf("Opera" != -1)?true:false; var _d=(n4||ie)?'document.':'document.getElementById("'; var _a=(n4||n6)?'':'all.'; var _r=(n6)?'"':''; var _s=(n4)?'':'.style'; if (n4){ document.write('<layer name="eyeball" top=0 left=0 width="69" height="34"><img src="eye.gif" width="69" height="34"></layer>'); document.write('<layer name="pupil1" top=0 left=0 width="13" height="13"><img src="pupils.gif" width="13" height="13"></layer>'); document.write('<layer name="pupil2" top:0 left=0 width="13" height="13"><img src="pupils.gif" width="13" height="13"></layer>'); } else{ if (ie) document.write('<div id="ic" style="position:absolute;top:0;left:0"><div style="position:relative">'); document.write('<div id="eyeball" style="position:absolute;top:100px;left:100px;width:69px;height:34px"><img src="eye.gif" width="69" height="34"></div>'); document.write('<div id="pupil1" style="position:absolute;top:0px;left:0px;width:12px;height:13px"><img src="pupils.gif" width="13" height="13"></div>'); document.write('<div id="pupil2" style="position:absolute;top:0px;left:0px;width:12px;height:13px"><img src="pupils.gif" width="13" height="13"></div>'); if (ie) document.write('</div></div>'); } var ym=0; var xm=0; if (n4||n6){ window.captureEvents(Event.MOUSEMOVE); function mouseNS(e){ ym = e.pageY-window.pageYOffset; xm = e.pageX; } if (n4)window.onMouseMove=mouseNS; if (n6)document.onmousemove=mouseNS; } if (ie||O){ function mouseIEO(){ ym = (ie)?event.clientY:event.clientY-window.pageYOffset; xm = event.clientX; } document.onmousemove=mouseIEO; } var etemp=eval(_d+_a+"eyeball"+_r+_s); var p1temp=eval(_d+_a+"pupil1"+_r+_s); var p2temp=eval(_d+_a+"pupil2"+_r+_s); dy=0; dx=0; fy=0; fx=0; angle1=0; angle2=0; d1=0; d2=0; function makefollow(){ sy=(!ie)?window.pageYOffset:0; wy=(ie)?document.body.clientHeight:window.innerHeight; wx=(ie)?document.body.clientWidth:window.innerWidth; //Keep eyes on screen. Netscape 6 plays up otherwise! var chy=Math.floor(fy-34); if (chy <= 0) chy = 0; if (chy >= wy-34) chy = wy-34; var chx=Math.floor(fx-34); if (chx <= 0) chx = 0; if (chx >= wx-69) chx = wx-69; etemp.top=chy+sy; etemp.left=chx; //eyeball1 centre. c1y=parseInt(etemp.top)+17; c1x=parseInt(etemp.left)+17; //eyeball2 centre. c2y=parseInt(etemp.top)+17; c2x=parseInt(etemp.left)+52; dy1 = ym+sy - c1y; dx1 = xm - c1x; d1 = Math.sqrt(dy1*dy1 + dx1*dx1); dy2 = ym+sy - c2y; dx2 = xm - c2x; d2 = Math.sqrt(dy2*dy2 + dx2*dx2); ay1 = ym+sy - c1y; ax1 = xm - c1x; angle1 = Math.atan2(ay1,ax1)*180/Math.PI; ay2 = ym+sy - c2y; ax2 = xm - c2x; angle2 = Math.atan2(ay2,ax2)*180/Math.PI; dv=1.7; p1temp.top=(d1 < 17)?(c1y-6+d1/dv*Math.sin(angle1*Math.PI/180))c1y-6+10*Math.sin(angle1*Math.PI/180)); p1temp.left=(d1 < 17)?(c1x-6+d1/dv*Math.cos(angle1*Math.PI/180))c1x-6+10*Math.cos(angle1*Math.PI/180)); p2temp.top=(d2 < 17)?(c2y-6+d2/dv*Math.sin(angle2*Math.PI/180))c2y-6+10*Math.sin(angle2*Math.PI/180)); p2temp.left=(d2 < 17)?(c2x-6+d2/dv*Math.cos(angle2*Math.PI/180))c2x-6+10*Math.cos(angle2*Math.PI/180)); } function move(){ if (ie)ic.style.top=document.body.scrollTop; dy=fy+=(ym-fy)*0.12-2; dx=fx+=(xm-fx)*0.12; makefollow(); setTimeout('move()',10); } window.onload=move; //--> </script> d) Nieve cayendo: Este código lo use hace tiempo es muy bonito y se puede variar por cualquier imagen no tan grande muy recomendable: <script type=text/javascript> /****************************************** * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html) * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code * Last updated Nov 9th, 05' by DD. This notice must stay intact for use ******************************************/ //Configure below to change URL path to the snow image var snowsrc="snow.gif" // Configure below to change number of snow to render var no = 10; // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0; // Configure how much snow should drop down before fading ("windowheight" or "pageheight" var snowdistance = "pageheight"; ///////////Stop Config////////////////////////////////// var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat"? document.documentElement : document.body } var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com"!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx = 0; // set coordinate variables xp = Math.random()*(doc_width-50); // set position variables yp = Math.random()*doc_height; am = Math.random()*20; // set amplitude variables stx = 0.02 + Math.random()/10; // set step variables sty = 0.7 + Math.random(); // set step variables if (ie4up||ns6up) { if (i == 0) { document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>"; } else { document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>"; } } } function snowIE_NS6() { // IE and NS6 main animation function doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight"? window.innerHeight : (ie4up && snowdistance=="windowheight"? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight"? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { // iterate for every dot yp += sty; if (yp > doc_height-50) { xp = Math.random()*(doc_width-am-30); yp = 0; stx = 0.02 + Math.random()/10; sty = 0.7 + Math.random(); } dx += stx; document.getElementById("dot"+i).style.top=yp+"px"; document.getElementById("dot"+i).style.left=xp + am*Math.sin(dx)+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script> e) Circulando Pista de Texto: Este efecto me encanto por que el texto da la apariencia de una serpiente aquí la captura Y Aquí el Codigo <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style type=text/css> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #000; /* End Optional */ /* Start Required - Do Not Edit */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} /* End Required */ /* End Circle Text Styles */ </style></span> <style type=text/css> / * Estilos Círculo de texto * / # outerCircleText {/ * Opcional - No establece font-size AQUÍ, colóquela en el SCRIPT * / font-style: italic; font-weight: bold; fuente -family: 'Comic Sans MS, Verdana, Arial; color: # 000; / * Fin * Opcional / / * Inicio Requerido - No modifique * / position: absolute; top: 0; izquierda: 0, z-index: 3000; cursor: por defecto;} # {div outerCircleText position: relative;} # div outerCircleText {position: absolute; top: 0; izquierda: 0; text-align: center;} / * Fin necesarios * / / * Círculo de final Estilos de texto * / </ style></span> <script type=text/javascript> /* Circling text trail- Tim Tilton Website: http://www.tempermedia.com/ Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts Modified Here for more flexibility and modern browser support Modifications as first seen in http://www.dynamicdrive.com/forums/ username:jscheuer1 - This notice must remain for legal use */ ;(function(){ // Your message here (QUOTED STRING) var msg = "Dynamic Drive! Scripts & More!"; /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */ // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 24; // Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2; // The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 10; // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.4; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.3; ////////////////////// Stop Editing ////////////////////// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y = Y += (y[i-1] - Y) * speed; x = X += (x[i-1] - X) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg)); oi.appendChild(d); y = x = Y = X = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); </script> Bueno, ya que no se pudo publicar esta información en Blogger la pase a mi Taringa para evitar fallos