Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh co dãn
URL: https://www.javascriptbank.com/dia-show-with-cute-streching.html
Trình diễn ảnh theo nguyên tắc: các ảnh được cho xuất hiện bằng cách kéo dãn ra, ảnh biến mất bằng cách nén co lại.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh co dãn
URL: https://www.javascriptbank.com/dia-show-with-cute-streching.html
<style>.containerstyle {position:relative;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script><!-- Beginning of JavaScript -// CONFIGURATION:// 1.Create your images (gif or jpg). They should have the same width and height. // Put those images in the same directory as the HTML-file. //You can add as many images as you like.// 2.Copy the script-block and paste it into head-section of your HTML-file.// 3. Copy the style-sheet and paste it into head-section of your HTML-file.// 4. Copy the span with the id "imgcontainer" and paste it into//the body-section of your HTML-file.// 5.Configure the absolute position of your images inside the style-block.// 6.Insert 'onLoad="stretchimage()"' into the body tag.// 7.Configure the varibales below// The width of your images (pixels). All pictures should have the same width.var imgwidth=600// The height of your images (pixels). All pictures should have the same height.var imgheight=60// The name of your images. You may add as many images as you like.var imgname=new Array()imgname[0]="logojs.gif"imgname[1]="logojs.gif"// Where should those images be linked to? // Add an URL for each image.// If you don't want to add an URL just write '#' instead of // the URL, see sample imgurl[2].var imgurl=new Array()imgurl[0]="http://javascriptbank.com"imgurl[1]="http://javascriptbank.com"// This block will preload your images. Do not edit this block.var imgpreload=new Array()for (i=0;i<=imgname.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=imgname[i]}// Standstill-time between the images (microseconds).var pause=2000// Speed of the stretching and shrinking effect. More means slower.var speed=20// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.var step=10// Do not edit the script belowvar i_loop=0var i_image=0function stretchimage() {if (i_loop<=imgwidth) {if (document.all) {imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"}i_loop=i_loop+stepvar timer=setTimeout("stretchimage()",speed) }else {i_loop=imgwidthclearTimeout(timer)imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>"var timer=setTimeout("shrinkimage()",pause)}}function shrinkimage() {if (i_loop>=0) {if (document.all) {imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"}i_loop=i_loop-stepvar timer=setTimeout("shrinkimage()",speed) }else {i_loop=0clearTimeout(timer)changeimage()}}function changeimage() {i_image++if (i_image>=imgname.length) {i_image=0}if (document.layers) {document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")document.imgcontainer.document.close()} stretchimage()}// - End of JavaScript - --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><span id="imgcontainer" class="containerstyle"></span><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->