Phiên bản đầy đủ: jsB@nk » Trình duyệt » Hiệu ứng trang » Đoạn giới thiệu cho web 2
URL: https://www.javascriptbank.com/document-wipes-effect.html
Một đoạn giới thiệu được hiển thị trước khi vào trang web. Hiệu ứng có cả chức năng Skip intro nếu người dùng không muốn xem đoạn giới thiệu này.
Phiên bản đầy đủ: jsB@nk » Trình duyệt » Hiệu ứng trang » Đoạn giới thiệu cho web 2
URL: https://www.javascriptbank.com/document-wipes-effect.html
<style type="text/css"><!--body{ background-color:#white; color:black; overflow:hidden }#skipDiv{position:absolute; visibility:hidden; width:80px; }#skipDiv a:link, #skipDiv a:visited{ font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; color:#dee7f7; }#wipeDiv1{ position:absolute; visibility:hidden; left:0px; top:0px; width:1px; height:1px; z-index:1; }/* Classes for formatting the wipe text content. Wipe class is used in doWipes function. It's the only one needed if all your text is formatted the same. */.wipe { color:black; font-family: verdana, arial, helvetica, sans-serif; }/* If you don't need different sizes, just put a size in the one above (.wipe) and delete unused classes */.wipe1{ font-size:36pt; }.wipe2{ font-size:22pt; }.wipe3{ font-size:18pt; }--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" type="text/javascript">/*Document Wipes effect- By Dynamic Web Coding (www.dyn-web.com)Copyright 2002 by Sharon Paine*/dom = (document.getElementById) ? true : false;ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;ns4 = (document.layers && !dom) ? true : false;ie4 = (document.all && !dom) ? true : false;nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;var origWidth, origHeight;if (ns4) { origWidth = window.innerWidth; origHeight = window.innerHeight;}// reload or reposition on resizefunction reDo() {if (ns4) { if (window.innerWidth != origWidth || window.innerHeight != origHeight) window.location.reload();} else setTimeout("rePosition()",200);}window.onresize = reDo;function rePosition() {positionBotmRt('skipDiv');if (typeof wipeLyr1!="undefined") wipeLyr1.centerIn(window);//if (typeof wipeLyr2!="undefined") wipeLyr2.centerIn(window);}// for positioning "skip intro" link-layerfunction positionBotmRt(lyr) {var lyrcss = (ns4)? document.layers[lyr]: (ie4)? document.all[lyr].style: (ie5|ns5)? document.getElementById(lyr).style: null;var winWd=(ie4||ie5)? document.body.clientWidth: window.innerWidth;var winHt=(ie4||ie5)? document.body.clientHeight: window.innerHeight;var x=winWd-getWidth(lyrcss,'skipLnk')-16;var y=winHt-getHeight(lyrcss,'skipLnk')-16;lyrcss.left=(ns4)? x: x+"px";lyrcss.top=(ns4)? y: y+"px";lyrcss.visibility = "visible";}var wipe_count=0;// to keep trackfunction doWipes() {if (wipe_count<wipe_array.length) {/////////////////////////////////////////////////////////////////////// This is set up for text on 1 line.// It wraps wipe layer content in table // so you can get rendered width/height.// NOTE: uses nowrap minimized attribute. // If you want to be xhtml valid, you could remove that // and use non-breaking spaces between words instead.var cntnt = '<table id="w1" border="0" cellpadding="0" cellspacing="0"><tr><td class="wipe" nowrap>'+ wipe_array[wipe_count] +'</td></tr></table>';with (wipeLyr1) {hide();// restore, for ns4, or new content is visible...clipTo(0,wipeLyr1.width,wipeLyr1.height,0);writeLyr(cntnt);width=getWidth(wipeLyr1.el,'w1');height=getHeight(wipeLyr1.el,'w1');centerIn(window);}// args: which wipe, delay, wipeTime, what nextwipeLyr1.wipe("in right", wipe_in_delay,wipe_array[wipe_count+1],"wipeOuts()"); } else {// wipes in image, then sends to destination url//wipeLyr2.wipe("in center", wipe_in_logo_delay,wipe_in_logo,"setTimeout('setDest()',dest_delay)"); setTimeout('setDest()',dest_delay);}}function wipeOuts() {wipeLyr1.wipe("out middle", wipe_out_delay,wipe_array[wipe_count+1]/wipe_out_dv,"doWipes()");wipe_count+=2;}// end of wipe-splash code/////////////////////////////////////////////////////////////////////// beginning of wipes.js proper// constructorfunction dynObj(obj) {this.el = (ns4)? getLyrRef(obj,document): (ie4)? document.all[obj]: (ie5||ns5)? document.getElementById(obj): null;this.css = (ns4)? this.el: (ie4||ie5||ns5)? this.el.style: null;this.doc = (ns4)? this.el.document: this.el;this.x = (ns4)? this.css.left: parseInt(this.css.left);this.y = (ns4)? this.css.top: parseInt(this.css.top);this.width = (ns4)? this.el.clip.width: (this.css.width)? parseInt(this.css.width): this.el.offsetWidth;this.height = (ns4)? this.el.clip.height: (this.css.height)? parseInt(this.css.height): this.el.offsetHeight;this.obj = obj + "dynObj"; eval(this.obj + "=this");}// args: which wipe, delay, wipeTime, what next (fn)dynObj.prototype.wipe=function(which,delay,wipeTime,fn) {this.wipeTime=wipeTime; this.fn=fn;switch (which) {// wipe into view by expanding to the rightcase "in right" :this.clipTo(0,0,this.height,0);this.show(); setTimeout(this.obj+".wipe_in_rt()",delay); break;// wipe into view by expanding from the center outcase "in center" :this.vCenter = Math.ceil(this.height/2);this.hCenter = Math.ceil(this.width/2);this.clipTo(this.vCenter, this.hCenter,this.vCenter,this.hCenter);this.show();setTimeout(this.obj+".wipe_in_center()",delay);break;// wipe into view from upper left corner to lower rightcase "in corner" :this.clipTo(0,0,0,0);this.show();setTimeout(this.obj+".wipe_in_corner()",delay);break;// wipe out of view by contracting to the centercase "out center" :this.vCenter = Math.ceil(this.height/2);this.hCenter = Math.ceil(this.width/2);setTimeout(this.obj+".wipe_out_center()",delay);break;// wipe out of view by contracting to the leftcase "out left" :setTimeout(this.obj+".wipe_out_left()",delay);break;// wipe out of view by contracting to the rightcase "out right" :setTimeout(this.obj+".wipe_out_right()",delay); break;// wipe out of view by contracting from left and right case "out middle" :this.dest=Math.ceil(this.width/2); setTimeout(this.obj+".wipe_out_mid()",delay);break;// wipe out of view from the upper left to lower rightcase "out corner" :setTimeout(this.obj+".wipe_out_corner()",delay);break; default:alert("Oops! Check choices again.");}this.wipeStart = new Date().getTime()+delay;this.per = Math.PI/(2*this.wipeTime);}// wipe into view by expanding to the rightdynObj.prototype.wipe_in_rt=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {//wipes could potentially be steady, accelerate, or decelerate//idea and math from Mike Foster at www.cross-browser.com//var inc = this.width*Math.sin(this.per*elapsed);//var inc = -this.width*Math.cos(this.per*elapsed)+this.width;var inc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,inc,this.height,0);setTimeout(this.obj+".wipe_in_rt()",35);} else {this.clipTo(0,this.width,this.height,0);if (this.fn) eval(this.fn);}}// wipe into view by expanding from the center outdynObj.prototype.wipe_in_center=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = this.vCenter*((1/this.wipeTime)*elapsed);var hinc = this.hCenter*((1/this.wipeTime)*elapsed);this.clipTo(this.vCenter-vinc,this.hCenter+hinc,this.vCenter+vinc,this.hCenter-hinc);setTimeout(this.obj+".wipe_in_center()",35);} else {this.clipTo(0,this.width,this.height,0);if (this.fn) eval(this.fn);}}// wipe into view from upper left corner to lower rightdynObj.prototype.wipe_in_corner=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = this.height*((1/this.wipeTime)*elapsed);var hinc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,hinc,vinc,0);setTimeout(this.obj+".wipe_in_corner()",35);} else {this.clipTo(0,this.width,this.height,0);if (this.fn) eval(this.fn);}}// wipe out of view by contracting to the centerdynObj.prototype.wipe_out_center=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = this.vCenter*((1/this.wipeTime)*elapsed);var hinc = this.hCenter*((1/this.wipeTime)*elapsed);this.clipTo(vinc,this.width-hinc,this.height-vinc,hinc);setTimeout(this.obj+".wipe_out_center()",35);} else {this.clipTo(this.vCenter, this.hCenter,this.vCenter,this.hCenter);if (this.fn) eval(this.fn);}}// wipe out of view by contracting to the leftdynObj.prototype.wipe_out_left=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var inc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,this.width-inc,this.height,0);setTimeout(this.obj+".wipe_out_left()",35);} else {this.clipTo(0,0,this.height,0);if (this.fn) eval(this.fn);}}// wipe out of view by contracting to the rightdynObj.prototype.wipe_out_right=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var inc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,this.width,this.height,inc);setTimeout(this.obj+".wipe_out_right()",35);} else {this.clipTo(0,this.width,this.height,this.width);if (this.fn) eval(this.fn);}}// wipe out of view by contracting from left and rightdynObj.prototype.wipe_out_mid=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {//var inc = this.dest*Math.sin(this.per*elapsed);var inc = -this.dest*Math.cos(this.per*elapsed)+this.dest;//var inc = this.dest*((1/this.wipeTime)*elapsed);this.clipTo(0,this.width-inc,this.height,inc);setTimeout(this.obj+".wipe_out_mid()",35);} else {this.clipTo(0,this.dest,this.height,this.dest);if (this.fn) eval(this.fn);}}dynObj.prototype.wipe_out_corner=function () {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = -this.height*Math.cos(this.per*elapsed)+this.height;var hinc = -this.width*Math.cos(this.per*elapsed)+this.width;this.clipTo(vinc,this.width,this.height,hinc);setTimeout(this.obj+".wipe_out_corner()",35);} else {this.clipTo(this.height,this.width,this.height,this.width);if (this.fn) eval(this.fn);}}// end wipe methods/////////////////////////////////////////////////////////////////////// center in container (window or outer layer)dynObj.prototype.centerIn = function(outer) {var outWd, outHt, inWd, inHt, x, y;if (eval(outer)==window) {outWd=(ie4||ie5)? document.body.clientWidth: window.innerWidth;outHt=(ie4||ie5)? document.body.clientHeight: window.innerHeight;} else {outWd=outer.width;outHt=outer.height;}inWd=this.width;inHt=this.height;x=Math.round((outWd-inWd)/2);y=Math.round((outHt-inHt)/2);this.shiftTo(x,y);}/////////////////////////////////////////////////////////////////////// clip methods// ideas from dynduo, brainjar and brattadynObj.prototype.getClipValues = function() {if (ns4) { var clipVal = new Array();clipVal[0] = this.css.clip.top;clipVal[1] = this.css.clip.right;clipVal[2] = this.css.clip.bottom;clipVal[3] = this.css.clip.left; } else if (ie4||ie5||ns5) {var clipVal = this.css.clip.substring(5,this.css.clip.length-1).split(' ');for (var i=0; i<4; i++) {clipVal[i] = parseInt(clipVal[i]);} }return clipVal;}dynObj.prototype.clipBy = function(top,rt,btm,lft) {if (ns4) { this.css.clip.top += top;this.css.clip.right += rt;this.css.clip.bottom += btm;this.css.clip.left += lft; } else if (ie4 || ie5 || ns5) {var clipVal = this.getClipValues(); this.css.clip = "rect(" + Number(clipVal[0]+top) + "px " + Number(clipVal[1]+rt) + "px " + Number(clipVal[2]+btm) + "px " + Number(clipVal[3]+lft) + "px)" }}dynObj.prototype.clipTo = function(top,rt,btm,lft) {if (ns4) { this.css.clip.top = top;this.css.clip.right = rt;this.css.clip.bottom = btm;this.css.clip.left = lft; } else if (ie4 || ie5 || ns5) { this.css.clip = "rect("+top+"px "+rt+"px "+btm+"px "+lft+"px)"; }}// end clip methodsdynObj.prototype.shiftTo = function (x,y) {// idea from dynduo.if (x!=null) this.x=x; if (y!=null) this.y=y;if (ns4) { this.css.moveTo(this.x,this.y); } else { this.css.left=this.x+"px"; this.css.top=this.y+"px"; }}dynObj.prototype.shiftBy = function(x,y) {this.shiftTo(this.x+x,this.y+y);}dynObj.prototype.show = function() { this.css.visibility = "visible"; }dynObj.prototype.hide = function() { this.css.visibility = "hidden"; }dynObj.prototype.writeLyr=function(cntnt) {if (ns4) {this.doc.write(cntnt);this.doc.close(); } else if (ie4||ie5||ns5) { this.doc.innerHTML = cntnt; }}// gets rendered height/width // for ns4, pass reference to layer. // for others, pass id of html element containing contentfunction getWidth(obj,id) {var wd =(ns4)? obj.document.width: (ie4)? document.all[id].offsetWidth: (ie5||ns5)? document.getElementById(id).offsetWidth: 0;return wd;}function getHeight(obj,id) {var ht =(ns4)? obj.document.height: (ie4)? document.all[id].offsetHeight: (ie5||ns5)? document.getElementById(id).offsetHeight: 0;return ht;}// get reference to nested layer for ns4// from dhtmllib.js by Mike Hall of www.brainjar.comfunction getLyrRef(lyr,doc) {if (ns4) {var theLyr;for (var i=0; i<doc.layers.length; i++) { theLyr = doc.layers[i];if (theLyr.name == lyr) return theLyr;else if (theLyr.document.layers.length > 0) if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)return theLyr; }return null; }}</script><script language="javascript" type="text/javascript"><!--dom = (document.getElementById) ? true : false;ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;ns4 = (document.layers && !dom) ? true : false;ie4 = (document.all && !dom) ? true : false;opr= navigator.userAgent.indexOf("Opera")!=-1nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;//////////////////////////////////////////////////////////////////////////// Customization Area//// If your wipe series includes images, put them in this array for preload, seperated by commas.var wipe_imgs=new Array('dwc_btn.gif');if (document.images) {var theImgs=new Array();for (var i=0;i<wipe_imgs.length;i++) {theImgs[i]=new Image();theImgs[i].src=wipe_imgs[i];}}// Here's where you put the content for the wipes.// Array elements are arranged in pairs:// content to display, time allotted for wipe of that content. // Suggestion: give longer, larger content more time.// If all your text is to be formatted the same, you can use// just the wipe class above (it is applied in the doWipes function)// and put plain text here.// Images and links are okay too.var wipe_array=new Array('<span class="wipe1">JavaScriptBank.com</span>',1000,'<span class="wipe3">Bank of thousands of great dhtml scripts</span>',2500,'<span class="wipe2">This is a cross-browser Wipes effect</span>',2500,'<span class="wipe3"><center>Created by Dynamic Drive<br></center></span>',2500);var wipe_final=new Array('Click here',2500);var wipe_in_delay=1000;// delay before each wipe invar wipe_out_delay=1200;// delay before each wipe out// wipe out speed (wipe-in time is divided by this number)var wipe_out_dv=2.5;// 2 to 4 recommendedvar dest_delay=0;// delay before going to destination url// destination url, where to go at end of wipesfunction setDest() {window.location = "http://JavaScriptBank.com/";}// end customization area/////////////////////////////////////////////////////////////////////if (opr||nodyn)setDest()function initDynLyrs() {// non-capable browsers skip this and go to your urlif (nodyn) setDest();positionBotmRt('skipDiv');wipeLyr1 = new dynObj('wipeDiv1');wipeLyr1.centerIn(window);wipeLyr1.show();//wipeLyr2 = new dynObj('wipeDiv2');//wipeLyr2.centerIn(window);doWipes();}window.onload=initDynLyrs;//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="wipeDiv1"></div><!-- This is for people who don't want to view the animation. Put your href here. --><div id="skipDiv"><a id="skipLnk" href="javascript:setDest()">skip intro</a></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->