Full version: jsB@nk » Image » Image viewer » Zoom-in and fade-in image
URL: https://www.javascriptbank.com/zoom-in-and-fade-in-image.html
This JavaScript makes image appear with the zoom-in and fade-in effect at the same time.
Full version: jsB@nk » Image » Image viewer » Zoom-in and fade-in image
URL: https://www.javascriptbank.com/zoom-in-and-fade-in-image.html
<script language=Javascript>// anh can tao hieu ung, ten anh cach nhau bang dau’,’var zoomimages=new Array("logojs.gif", "photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg")// bien nay dung de thuc hien lai hieu ungvar imgpreload=new Array()for (i=0;i<=zoomimages.length;i++) {imgpreload[i]=new Image()imgpreload[i].src=zoomimages[i]}// kich co,vi tri,thoi gian cua anh khi thuc hien hieu ungvar zoomfactor=20var positionleft=0var positiontop=0var timervar marginright=0var i_fadestrength=5var i_images=0var step=1var contentvar imageboxwidth=10var imageboxheight=0var bodywidth=0var bodyheight=0function setimage() {bodywidth=document.body.clientWidthbodyheight=document.body.clientHeightif (i_images>=zoomimages.length) {i_images=0}content="<img name='newpic' src='"+zoomimages[i_images]+"'>"imagebox.innerHTML=contenttimer=setTimeout("resizeimage()",50)}function resizeimage() {if (i_fadestrength<120) {imageboxwidth+=zoomfactorcontent="<img name='newpic' src='"+zoomimages[i_images]+"' width='"+imageboxwidth+"'>"imagebox.innerHTML=contentimageboxwidth=document.newpic.widthimageboxheight=document.newpic.heightimagebox.filters.alpha.opacity=Math.floor(100-i_fadestrength)document.all.imagebox.style.posLeft=bodywidth/2-imageboxwidth/2document.all.imagebox.style.posTop=bodyheight/2-imageboxheight/2document.all.imagebox.style.overflowX="hidden"document.all.imagebox.style.visibility="visible"step+=1.5i_fadestrength+=steptimer=setTimeout("resizeimage()",50)}else {clearTimeout(timer)i_fadestrength=0;step=1;i_images++imageboxwidth=0setimage()}}if (document.all) {document.write("<DIV id='imagebox' style='position:absolute;filter:alpha(opacity=0);'></DIV>")}if (document.all) {onload=setimage}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->