Phiên bản đầy đủ: jsB@nk » Chữ » Ráp nối khung chữ
URL: https://www.javascriptbank.com/textmagnet.html
Ban đầu, hiệu ứng cắt hộp thoại thành nhiều mảng sau đó cho các mảng này nối với nhau hình thành một hộp thoại hoàn chỉnh.
Phiên bản đầy đủ: jsB@nk » Chữ » Ráp nối khung chữ
URL: https://www.javascriptbank.com/textmagnet.html
<STYLE>.spanstyle {BACKGROUND-COLOR: #004400; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; COLOR: olive; FONT-FAMILY: Arial Black; FONT-SIZE: 28px; FONT-STYLE: italic; HEIGHT: 90px; LEFT: -5000px; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: center; WIDTH: 280px}</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 -// TextMagnet// CONFIGURATION:// 1. Copy and paste the two script-blocks into your HTML-file:// Put the first script-block inside the head-section of your HTML-file.//Put the second script-block right at the end of the //body-section of your HTML-file.// 2.Copy and paste the style-sheet into head-section of your HTML-file.//Configure font, font-size, font-color, background-color etc.// 3. Insert 'onLoad="changetext()"' into the body tag.// 4. Configure the variables below:// The width of your textbox (pixels). var textwidth=300// The height of your textbox (pixels). var textheight=150// Your messages. You may add as many messages as you like.var message=new Array()message[0]="Are you happy?"message[1]="Are you married?"message[2]="Or both?"message[3]="Then you must be a very lucky person."// Final horizontal position of the image: distance to the left margin of the window// If you set this to '-1' the textbox will centered in the middle of the browser-windowvar x_finalpos=-1// Final vertical position of the image: distance to the top margin of the window// If you set this to '-1' the textbox will centered in the middle of the browser-windowvar y_finalpos=50// Number of sliced cells (the higher this value the slower the script)var x_slices=24// Number of sliced rows (the higher this value the slower the script)var y_slices=1// Speed of the reassembling effect. More means slower.var pause=10// The width and heigth of the zone where the debris of the message are spread (pixels)var screenwidth=900var screenheight=600// Do not change the variables belowvar x_step=new Array()var y_step=new Array()var x_randompos=0var y_randompos=0var i_loop=0var max_loop=30var i_text=0var width_slice=Math.floor(textwidth/x_slices)var height_slice=Math.floor(textheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0function initiate() {if (x_finalpos==-1) {x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)}if (y_finalpos==-1) {y_finalpos=Math.floor(document.body.clientHeight/2)-Math.floor(textheight/2)}cliptop=0clipbottom=height_sliceclipleft=0clipright=width_slicei_loop=0spancounter=0 if (document.all) { for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")x_randompos=Math.ceil(screenwidth*Math.random())y_randompos=Math.ceil(screenheight*Math.random())thisspan.posLeft=x_randomposthisspan.posTop=y_randompos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"clipleft+=width_slice clipright+=width_slice spancounter++} clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice} } explode_IE()}function changetext() {spancounter=0for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")thisspan.posLeft=-5000spancounter++}}spancounter=0if (i_text>message.length-1) {i_text=0}for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisinnerspan=eval("span"+spancounter) thisinnerspan.innerHTML=message[i_text]spancounter++}}i_text++initiate()}function explode_IE() {spancounter=0if (i_loop<=max_loop-1) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)thisspan.posLeft+=x_step[spancounter]thisspan.posTop+=y_step[spancounter]spancounter++}}i_loop++var timer=setTimeout("explode_IE()",pause)}else {spancounter=0clearTimeout(timer)var timer=setTimeout("changetext()",2000)}}// - 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=changetext()><SCRIPT><!-- Beginning of JavaScript -if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) { document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")spancounter++}}spancounter=0}// - 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-->