Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Ảnh nối các khớp
URL: https://www.javascriptbank.com/double-imageslicer.html
Ảnh được hiển thị bằng cách cho các mảng của ảnh bay từ hai bên sang và nối lại với nhau tạo nên một ảnh hoàn chỉnh.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Ảnh nối các khớp
URL: https://www.javascriptbank.com/double-imageslicer.html
<script><!-- Beginning of JavaScript -// CONFIGURATION:// You need only one image besides the script. You don't have// to slice the image yourself! The script will do this job for you.// Configure the script as follows:// 1. Copy and paste the two script-blocks into your HTML-file:// The first script-block should be inside the head-section of your HTML-file.//The second script-block should be inside the body-section.// 2.Put your image in the same directory as the HTML-file .// 3. Insert onLoad="initiate()" right into the body-tag.// 4. Configure the variables below:// The width of your image (pixels)var imgwidth=200// The height of your image (pixels)var imgheight=138// The URL of the sliced imagevar imgurl="logojs.gif"// Final horizontal position of the image: distance to the left margin of the window (pixels)// IMPORTANT: // if you want to center the image in the middle of the browser-window then write -1.// If you want to put the image on a absolute position // then write the number (for instance 223).var x_finalpos=-1// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=20// Total number of slicesvar imgslices=20// Speed of horizontal glidingvar step=40var pause=10// Do not edit the variables below this linevar x_rightspans=0var x_leftspans=0var marginrightvar marginleftvar height_slice=Math.floor(imgheight/imgslices)var cliptop=0var clipbottom=cliptop+height_slicevar clipleft=0var clipright=imgwidthvar spannummer=0var spannrbefore=0function initiate() {if (x_finalpos==-1) {x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(imgwidth/2)}if (document.all) {moveslices_IE()}}function moveslices_IE() {if (x_rightspans==0 || x_leftspans==0) {if (x_rightspans==0) {for (i=0;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft-=step}if (thisspan.posLeft<=x_finalpos) {x_rightspans=1for (i=0;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=x_finalpos}}}if (x_leftspans==0) {for (i=1;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft+=step}if (thisspan.posLeft>=x_finalpos) {x_leftspans=1for (i=1;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=x_finalpos}}}var timer=setTimeout("moveslices_IE()",pause)}else {clearTimeout(timer)}}// - 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="initiate()" topmargin=100px;><script><!-- Beginning of JavaScript -for (i=0;i<=imgslices-1;i+=2) {marginright=document.body.clientWidth+50 document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")document.write("<img src='"+imgurl+"'>") document.write("</span>")cliptop+=2*height_sliceclipbottom+=2*height_slice}cliptop=height_sliceclipbottom=2*height_slicefor (i=1;i<=imgslices-1;i+=2) {marginleft=-imgwidth-50 document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginleft+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")document.write("<img src='"+imgurl+"'>") document.write("</span>")cliptop+=2*height_sliceclipbottom+=2*height_slice}// - End of JavaScript - --></script></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->