Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh phóng to khi rê chuột 2
URL: https://www.javascriptbank.com/link-dock-vlinkdock.html
Hiệu ứng làm cho các ảnh được xếp theo chiều dọc và sẽ phóng to đến một kích thước được bạn xác định trước khi rê chuột vào chúng.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh phóng to khi rê chuột 2
URL: https://www.javascriptbank.com/link-dock-vlinkdock.html
<script language="javascript">// VLinkDock - V 1.0// By Brian Gosselin// Release Info:// V 1.0 - Initial release.// ENTER LINK ATTRIBUTES IN THE ARRAY BELOW; EACH LINE CONTAINS ALL THE// PARAMETERS FOR ONE LINK. USE THE FOLLOWING FORMAT:// [ 'LINK_URL' , 'IMAGE_URL' , 'URL_TARGET', 'TEXT_UNDER_LINK' ]// VALID VALUES FOR 'URL_TARGET' ARE:// '_blank' (NEW WINDOW)// 'name' (THE NAME OF AN EXISTING WINDOW OR FRAME)// '' (CURRENT PAGE)// IF YOU DO NOT WANT TEXT DISPLAYED UNDER A LINK, SIMPLY USE AN EMPTY STRING AS THE PARAMETER FOR 'TEXT_UNDER_LINK'.var linkList=[[ 'javascript:alert(\'Javascript Alert Link\')' , 'square.gif' , '', 'JS ALERT BOX' ],[ 'javascript:window.print()' , 'tanbutton.gif' , '', 'PRINT THIS PAGE' ],[ 'http://JavaScriptBank.com' , '../logojs.gif' , '_blank', 'JavaScriptBank.com' ],[ '#' , 'uturn.gif' , '', 'DEAD LINK 1' ],[ '#' , 'blueglobe.gif' , '', 'DEAD LINK 2' ],[ '#' , 'cylinder.gif' , '', '' ],[ '#' , 'woodbutton.gif' , '', 'DEAD LINK 3' ],[ '#' , 'otherarrow.gif' , '', 'DEAD LINK 4' ],[ '#' , 'marblebutton.gif' , '', 'DEAD LINK 5' ]]// CHANGE THE OTHER VALUES BELOW TO SUIT YOUR APPLICATIONvar startSize=35; // THE STARTING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).var endSize=90; // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).var useText=true; // true = USE TEXT RIGHT OF THE LINK, false = NO TEXT RIGHT OF THE LINK.var defText='HOVER OVER A LINK' // DEFAULT TEXT TO APPEAR TO THE RIGHT OF THE LINKS WHEN NOT HOVERED OVER. // USE AN EMPTY STRING FOR NO TEXT.var textGap=10; // PIXEL GAP ON EACH SIDE OF THE OPTIONAL TEXT (WHEN defText IS SET TO true).var effectW=3.5; // THE NUMBER OF ICONS AFFECTED BY OF THE MAGNIFICATION AT ONCE (APPROXIMATE). USE VALUES BETWEEN 2 AND 5.// BELOW IS THE STYLE-SHEET RULE FOR HOW THE TEXT IS TO BE DISPLAYED. USE VALID CSS RULES.var textStyle="font-family:verdana; font-size:10pt; color:black; font-weight:bold";//********** DO NOT EDIT BEYOND THIS POINT **********\\var w3c=(document.getElementById)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(document.all && w3c)?true:false;var ns4=(document.layers)?true:false;var my=0;var overEl=false;var id=0;var elList=new Array();var elText;var pgLoaded=false;if(defText=='')defText=' ';effectW=Math.max(2,Math.min(5,effectW))+.5;var wA=effectW*endSize/2;var mX=wA/1.5;function getMxy(v){my=(ie5||ie4)?event.clientY+document.body.scrollTop:v.pageY;}function getEl(s){if(ns4)return findLayer(s,document);else return (ie4)?document.all[s]:document.getElementById(s);}function getH(e){return parseInt(e.style.height);}function setImgS(i,y){elList[i].style.width=y;elList[i].style.height=y;document.images['linkDockI'+i].width=y;document.images['linkDockI'+i].height=y;}function getT(el){var y=0;while(el.offsetParent!=null){y+=el.offsetTop;el=el.offsetParent;}return y+el.offsetTop;}function rAll(){for(i=0;i<linkList.length;i++)setImgS(i,startSize);}function dockMagnify(){var tEl,n1,n2;if(overEl){for(i=0;i<linkList.length;i++){tEl=elList[i];if((getT(tEl)>=my-wA)&&(getT(tEl)<=my+wA)){n1=getT(tEl)+getH(tEl)/2+10;n2=my-wA;n1=(endSize*Math.sin(Math.abs(n1-n2)/mX));setImgS(i,Math.max(n1,startSize));}else setImgS(i,startSize);}}}function mOver(){overEl=true;clearTimeout(id);}function mOut(){overEl=false;id=setTimeout('rAll()',100);}// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALLfunction findLayer(name,doc){var i,layer;for(i=0;i<doc.layers.length;i++){layer=doc.layers[i];if(layer.name==name)return layer;if(layer.document.layers.length>0)if((layer=findLayer(name,layer.document))!=null)return layer;}return null;}function formatText(text){var ta;if(text=='')text=' ';else{ta=text.split('');text='';for(i=0;i<ta.length;i++){if(i<ta.length-1)text+=ta[i]+'<br>';else text+=ta[i];}}return text;}function writeText(text){if(useText && pgLoaded){text=(text<0)?defText:linkList[text][3];text=formatText(text);if(ns4){elText.document.open();elText.document.write('<table cellpadding=0 cellspacing=0 border=0 height="'+(linkList.length*startSize)+'" width="'+((textGap*2)+20)+'"><tr valign="middle"><td align="center"><span style="'+textStyle+'">'+text+'</span></td></tr></table>');elText.document.close();}else elText.innerHTML=text;}}function writeHTML(){var t='';if(w3c||ie4){t+='<table cellpadding=0 cellspacing=0 border=0 height="'+(((linkList.length-4)*startSize)+(4*endSize))+'" width="'+((useText)?endSize+(textGap*2+20):endSize)+'"><tr valign="middle" align="center"><td width="'+endSize+'">';for(i=0;i<linkList.length;i++){t+='<div id="linkDockD'+i+'" style="width:'+startSize+'px; height:'+startSize+'px;">';t+='<a href="'+linkList[i][0]+'" target="'+linkList[i][2]+'" onmouseover="writeText('+i+')" onmouseout="writeText(-1)"><img name="linkDockI'+i+'" src="'+linkList[i][1]+'" width="'+startSize+'" height="'+startSize+'" border="none"></a>';t+='</div>';}t+='</td>';if(useText)t+='<td align="center" width="'+((textGap*2)+20)+'"><div id="dockText" style="'+textStyle+'">'+formatText(defText)+'</div></td>';t+='</tr></table>';}else{t+='<table cellpadding=0 cellspacing=0 border=0 width="'+((useText)?startSize+(textGap*2+20):startSize)+'" height="'+(linkList.length*startSize)+'"><tr><td width="'+startSize+'" valign="middle" align="center">';for(i=0;i<linkList.length;i++)t+='<a href="'+linkList[i][0]+'" target="'+linkList[i][2]+'" onmouseover="writeText('+i+')" onmouseout="writeText(-1)"><img src="'+linkList[i][1]+'" width="'+startSize+'" height="'+startSize+'" border="none"></a><br>';t+='</td>';if(useText)t+='<td align="center" width="'+((textGap*2)+20)+'"><ilayer width="'+((textGap*2)+20)+'" height="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td>';t+='</tr></table>';}document.write(t);}window.onload=function(){if(w3c||ie4){for(j=0;j<linkList.length;j++){elList[j]=getEl('linkDockD'+j);elList[j].n=j;elList[j].onmouseover=mOver;elList[j].onmouseout=mOut;}document.onmousemove=getMxy;setInterval('dockMagnify()',20);}elText=getEl('dockText');pgLoaded=true;if(ns4)writeText(-1);}writeHTML();</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/image/Link_Dock/Link_Dock_images.zip