Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh phóng to khi rê chuột 1
URL: https://www.javascriptbank.com/link-dock-linkdock.html
Hiệu ứng làm cho các ảnh được xếp theo chiều ngang 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 1
URL: https://www.javascriptbank.com/link-dock-linkdock.html
<script language="javascript">// LinkDock - V 1.5// By Brian Gosselin// Release Info:// V 1.0 - Initial release.// V 1.1 - Minor code changes for magnification smoothness and accuracy.// V 1.2 - Added option to include text under the links as they are hovered over.// Fixed a magnification bug when the page is too small to fit the whole menu.// V 1.3 - Fixed a bug where you get script errors if you hover over an image before the// page finishes loading.// V 1.4 - Added a tweak by RAJ to smoothen the entry into the menu.// V 1.5 - Fixed mouse bug where the mouse wasn't tracking right when dock was wider than the// page and the page was scrolled to the right. // 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' , '', 'Javascript alert box' ],[ 'javascript:window.print()' , 'tanbutton.gif' , '', 'Print this page...' ],[ 'http://JavaScriptBank.com' , '../logojs.gif' , '_blank', 'JavaScriptBank.com' ],[ '#' , 'tanglobe.gif' , '', 'Dead Link...' ],[ '#' , 'arrow.gif' , '', 'Dead Link...' ],[ '#' , 'uturn.gif' , '', 'Dead Link...' ],[ '#' , 'blueglobe.gif' , '', 'Dead Link...' ],[ '#' , 'cylinder.gif' , '', '' ],[ '#' , 'woodbutton.gif' , '', 'Dead Link...' ],[ '#' , 'otherarrow.gif' , '', 'Dead Link...' ],[ '#' , 'marblebutton.gif' , '', 'Dead Link...' ]]// CHANGE THE OTHER VALUES BELOW TO SUIT YOUR APPLICATIONvar startSize=50; // THE STARTING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).//<!-- RAJvar curSize=50; // variable used in the first time zoom/shrink// RAJ -->var endSize=100; // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).var useText=true; // true = USE TEXT UNDER THE LINK, false = NO TEXT UNDER THE LINK.var defText='Hover over a link...' // DEFAULT TEXT TO APPEAR UNDER THE LINKS WHEN NOT HOVERED OVER. // USE AN EMPTY STRING FOR NO TEXT.var textGap=10; // PIXEL GAP FROM BOTTOM OF MENU TO TOP OF 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:11pt; 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 mx=0;var overEl=false;var enterEl=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){mx=(ie5||ie4)?event.clientX:v.pageX;}function getEl(s){if(ns4)return findLayer(s,document);else return (ie4)?document.all[s]:document.getElementById(s);}function getW(e){return parseInt(e.style.width);}function setImgS(i,x){elList[i].style.width=x;elList[i].style.height=x;document.images['linkDockI'+i].width=x;document.images['linkDockI'+i].height=x;}function getL(el){var x=0;var sx=(document.all)?document.body.scrollLeft:0;while(el.offsetParent!=null){x+=el.offsetLeft;el=el.offsetParent;}return x+el.offsetLeft-sx;}function rAll(){// decrease size of zoomed images graduallyfor(i=0;i<elList.length;i++) {//<!-- RAJcurSize=getW(elList[i]);if (curSize>startSize) {id=setTimeout('rAll()',10);curSize--;// RAJ -->setImgS(i,curSize);}}}function dockMagnify(){var tEl,n1,n2;//<!-- RAJif(overEl) {if(curSize<endSize) curSize+=5; } else curSize=50;// RAJ -->if(overEl){for(i=0;i<linkList.length;i++){tEl=elList[i];if((getL(tEl)>=mx-wA)&&(getL(tEl)<=mx+wA)){n1=getL(tEl)+getW(tEl)/2+10;n2=mx-wA;//<!-- RAJn1=(curSize*Math.sin(Math.abs(n1-n2)/mX));// RAJ -->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 writeText(text){if(useText && pgLoaded){text=(text<0)?defText:linkList[text][3];if(text=='')text=' ';if(ns4){elText.document.open();elText.document.write('<center><span style="'+textStyle+'">'+text+'</span></center>');elText.document.close();}else elText.innerHTML=text;}}function writeHTML(){var t='';if(w3c||ie4){t+='<table cellpadding=0 cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';for(i=0;i<linkList.length;i++){t+='<span 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+='</span>';}t+='</td></tr></table>';if(useText)t+='<center><div id="dockText" style="'+textStyle+'; padding-top:'+textGap+'px">'+defText+'</div></center>';}else{t+='<table cellpadding=0 cellspacing=0 border=0 width="'+(linkList.length*startSize)+'"><tr valign="bottom">';for(i=0;i<linkList.length;i++)t+='<td height="'+endSize+'"><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></td>';t+='</tr>';if(useText)t+='<tr><td colspan="'+linkList.length+'"><td height="'+textGap+'"></td></tr><tr><td colspan="'+linkList.length+'"><ilayer width="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td></tr>';t+='</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');if(ns4)writeText(-1);pgLoaded=true;}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