Phiên bản đầy đủ: jsB@nk » Màu nền » Xem ảnh nền qua các khung
URL: https://www.javascriptbank.com/floating-uncovering-background-animation.html
Hiệu ứng tạo ra các khung trong suốt di chuyển tự do trên trang web của bạn, dựa vào các khung này bạn có thể xem được ảnh nền ẩn bên dưới theo từng phần tương ứng với kích thước của khung.
Phiên bản đầy đủ: jsB@nk » Màu nền » Xem ảnh nền qua các khung
URL: https://www.javascriptbank.com/floating-uncovering-background-animation.html
<SCRIPT>/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/<!-- Beginning of JavaScript -// Floating Uncovering Background Script// Author: Peter Gehrig // Web Site: http://www.24fun.com // number of floating imagesvar numberofimages=4// URL of your imagevar imgurl="../image/pic191.jpg"// maximum width of the floating objectsvar clipwidthmax=200// maximum height of the floating objectsvar clipheightmax=120// do not edit the variables belowvar floatingspeed=20var clipleft=new Array()var clipright=new Array()var cliptop=new Array()var clipbottom=new Array()var clipwidth=new Array()var clipheight=new Array()if (document.all) {var preloadimage=new Image()preloadimage.src=imgurl}var tempo=30numberofimages=numberofimages-1var shift_x=Math.floor(numberofimages/2)*-1var shift_y=Math.floor(numberofimages/2)*-1var stepx=new Array()var stepy=new Array()for (i=0;i<=numberofimages;i++) {stepx[i]=randommaker(floatingspeed)stepy[i]=randommaker(floatingspeed)}var imgwidth=new Array()var imgheight=new Array()var marginbottom=0var marginleft=0var margintop=0var marginright=0var timerfunction setValues() {if (document.all) {marginleft=0margintop=0 marginbottom=document.body.clientHeight marginright=document.body.clientWidthfor (i=0;i<=numberofimages;i++) { clipheight[i]=randommaker(clipheightmax)+50clipwidth[i]=randommaker(clipwidthmax)+50clipleft[i]=randommaker(marginright)-clipwidth[i]cliptop[i]=randommaker(marginbottom)-clipheight[i]}for (i=0;i<=numberofimages;i++) { var opacitystrength=randommaker(60)var thisspan=eval("flyimage"+i)thisspan.innerHTML="<img src='"+imgurl+"' width='"+marginright+"' height='"+marginbottom+"' style='filter:alpha(opacity="+opacitystrength+")'>"thisspan=eval("document.all.flyimage"+i+".style") thisspan.posLeft=0thisspan.posTop=0thisspan.visibility="visible"}checkmovement()}}function randommaker(range) {rand=Math.floor(range*Math.random())if (rand==0) {rand=Math.ceil(range/2)} return rand}function checkmovement() {if (document.all) {checkposition()movepictures() timer=setTimeout("checkmovement()",tempo)}}function movepictures() {if (document.all) {for (i=0;i<=numberofimages;i++) { var thisspan=eval("document.all.flyimage"+(i)+".style") clipleft[i]+=stepx[i]clipright[i]=clipleft[i]+clipwidth[i]cliptop[i]+=stepy[i]clipbottom[i]=cliptop[i]+clipheight[i]thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")" }}}function checkposition() {if (document.all) {for (i=0;i<=numberofimages;i++) { var thisspan=eval("document.all.flyimage"+i+".style")if (clipright[i]>marginright) {clipleft[i]-=Math.abs(stepx[i])clipright[i]=clipleft[i]+clipwidth[i]thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"stepx[i]=randommaker(floatingspeed)*-1}if (clipleft[i]<marginleft) {clipleft[i]+=Math.abs(stepx[i])clipright[i]=clipleft[i]+clipwidth[i]thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"stepx[i]=randommaker(floatingspeed)}if (clipbottom[i]>marginbottom) {cliptop[i]-=Math.abs(stepy[i])clipbottom[i]=cliptop[i]+clipheight[i]thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"stepy[i]=randommaker(floatingspeed)*-1}if (cliptop[i]<margintop) {cliptop[i]+=Math.abs(stepy[i])clipbottom[i]=cliptop[i]+clipheight[i]thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"stepy[i]=randommaker(floatingspeed)}}}}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=setValues()><script>if (document.all) {for (i=0;i<=numberofimages;i++) {document.write("<DIV id='flyimage"+i+"' style='position:absolute;visibility:hidden'></DIV>")}window.onload=setValues}</script></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->