Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Cuộn ảnh với hiệu ứng mờ
URL: https://www.javascriptbank.com/double-fading-image-scroller-2-03.html
Hiệu ứng tạo một trình diễn ảnh theo chiều từ phải sang trái với hai đầu bị làm mờ dần, khi ta rê con trỏ chuột đến thì ảnh ngừng di chuyển.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Cuộn ảnh với hiệu ứng mờ
URL: https://www.javascriptbank.com/double-fading-image-scroller-2-03.html
<SCRIPT>// Image Scroller 2.03 with double-fade effect// URLs of slidesvar slideurl=new Array("logojs.gif","photo1.jpg","photo2.jpg","photo3.jpg")// comments displayed below the slidesvar slidecomment=new Array("JavaScriptBank.com","JavaScriptBank.com","JavaScriptBank.com","JavaScriptBank.com")// links for each slidevar slidelink=new Array("http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com","http://JavaScriptBank.com")// targets of the links. Allowed values: "_parent", "_top", "_blank", "_self"var slidetarget=new Array("_blank","_blank","_blank","_blank")// the width of the slideshow (pixels)var scrollerwidth=200// the height of the slideshow (pixels)var scrollerheight=200// width of the transparent zones (pixels)var translayerszone=40// font-attributes for the commentsvar slidefont="Arial"var slidefontcolor="blue"var slidefontsize="2"// background-color of webpage var pagebgcolor="#FFFFFF"// do not edit below this linevar translayerswidth=1var translayersmax=Math.floor(translayerszone/translayerswidth)var translayersleftpos=0var translayersopacity=100var translayersfactor=100/translayersmaxvar translayerswidthall=translayersmax*translayerswidthvar allpicturewidthvar distancepictopic=0var scrollerleft=0var scrollertop=0var pause=20var step=2var newstep=stepvar clipleft,clipright,cliptop,clipbottomvar i_picture=0var timervar picturecontent=""var ns4=document.layers?1:0var ns6=document.getElementById&&!document.all?1:0 var ie=document.all?1:0var browserinfos=navigator.userAgent var opera=browserinfos.match(/Opera/) var preloadedimages=new Array()for (i=0;i<slideurl.length;i++){preloadedimages[i]=new Image()preloadedimages[i].src=slideurl[i]}function init() { if (ie) {allpicturewidth=document.all.picturediv.offsetWidthdocument.all.picturediv.style.posTop=scrollertop document.all.picturediv.style.posLeft=scrollerleft+scrollerwidthclipleft=0clipright=0cliptop=0clipbottom=scrollerheightdocument.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.picturediv.style.visibility="visible"scrollpicture() }if (ns6) {allpicturewidth=document.getElementById('emptypicturediv').offsetWidthdocument.getElementById('picturediv').style.top=scrollertop document.getElementById('picturediv').style.left=scrollerleft+scrollerwidthclipleft=0clipright=0cliptop=0clipbottom=scrollerheightdocument.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.getElementById('picturediv').style.visibility="visible"scrollpicture() }if (ns4) {allpicturewidth=document.roof.document.picturediv.document.widthdocument.roof.document.picturediv.top=scrollertopdocument.roof.document.picturediv.left=scrollerleft+scrollerwidthdocument.roof.document.picturediv.clip.left=0document.roof.document.picturediv.clip.right=0document.roof.document.picturediv.clip.top=0document.roof.document.picturediv.clip.bottom=scrollerheightdocument.roof.document.picturediv.visibility="visible" scrollpicture() }}function scrollpicture() { if (ie) {if (document.all.picturediv.style.posLeft>=scrollerleft-allpicturewidth) {document.all.picturediv.style.posLeft-=stepclipright+=stepif (clipright>scrollerwidth) {clipleft+=step}document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"var timer=setTimeout("scrollpicture()",pause)}else {resetposition()}}if (ns6) {if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) {document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-stepclipright+=stepif (clipright>scrollerwidth) {clipleft+=step}document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"var timer=setTimeout("scrollpicture()",pause)}else {resetposition()}} if (ns4) {if (document.roof.document.picturediv.left>=scrollerleft-allpicturewidth) {document.roof.document.picturediv.left-=stepdocument.roof.document.picturediv.clip.right+=stepif (document.roof.document.picturediv.clip.right>scrollerwidth) {document.roof.document.picturediv.clip.left+=step}var timer=setTimeout("scrollpicture()",pause)}else {resetposition()}}}function onmsover() {step=0}function onmsout() {step=newstep}function resetposition() {if (ie) { document.all.picturediv.style.posLeft=scrollerleft+scrollerwidthclipleft=0clipright=0document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture()}if (ns6) {allpicturewidth=document.getElementById('emptypicturediv').offsetWidth document.getElementById('picturediv').style.left=scrollerleft+scrollerwidthclipleft=0clipright=0document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture()}if (ns4) {document.roof.document.picturediv.left=scrollerleft+scrollerwidthdocument.roof.document.picturediv.clip.left=0document.roof.document.picturediv.clip.right=0 scrollpicture()}}picturecontent=""picturecontent+="<table cellpadding=2 cellspacing=0>"picturecontent+="<tr>"for (i=0;i<=slideurl.length-1;i++) {picturecontent+="<td>"picturecontent+="<a href=""+slidelink[i]+"" target=""+slidetarget[i]+"" onMouseOver="javascript:onmsover()" onMouseOut="javascript:onmsout()">"picturecontent+="<img src=""+slideurl[i]+"" border=0></a>"picturecontent+="</td>"}picturecontent+="</tr>"picturecontent+="<tr>"for (i=0;i<=slideurl.length-1;i++) {picturecontent+="<td>"picturecontent+="<font face=""+slidefont+"" color=""+slidefontcolor+"" size="+slidefontsize+">"picturecontent+=slidecomment[i]picturecontent+="</font>"picturecontent+="</td>"}picturecontent+="</tr>"picturecontent+="</tr></table>"if (ie || ns6) {document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden">')document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')if (ie && !opera) {for (i=0;i<=translayersmax;i++) {document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity-=translayersfactor}translayersleftpos=scrollerwidth-translayersleftposfor (ii=0;ii<=translayersmax;ii++) {document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity+=translayersfactor}}if (ns6 && !opera) {for (i=0;i<=translayersmax-1;i++) {document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity-=translayersfactorif (translayersopacity<0) {translayersopacity=0.001}}translayersleftpos=scrollerwidth-translayersleftpostranslayersopacity=0.001for (i=0;i<=translayersmax-1;i++) {document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>')translayersleftpos+=translayerswidthtranslayersopacity+=translayersfactor}}document.write('</div>')document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')window.onload=init}if (ns4) {document.write('<ilayer name="roof" width='+scrollerwidth+' height='+scrollerheight+'>')document.write('<layer name="picturediv" width='+scrollerwidth+' height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>')document.write('</ilayer>')window.onload=init}</SCRIPT>