Phiên bản đầy đủ: jsB@nk » Trình duyệt » Popup khi rê chuột khỏi nội dung
URL: https://www.javascriptbank.com/popup-on-mouseout-index.html
Khi hiệu ứng JavaScript này được cài đặt vào trang web của bạn, mỗi khi người dùng rê con trỏ chuột ra khỏi vùng nội dung của trang web, nó sẽ làm mờ trang web đi và hiện một khung chứa những thông báo mà bạn đã định nghĩa sẵn.Một cách thức khác để tạo sự chú ý cho người duyệt website của bạn mà không gây phản cảm.
Phiên bản đầy đủ: jsB@nk » Trình duyệt » Popup khi rê chuột khỏi nội dung
URL: https://www.javascriptbank.com/popup-on-mouseout-index.html
<script language="javascript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*///Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence featurefunction animatedcollapse(divId, animatetime, persistexpand, initstate){this.divId=divIdthis.divObj=document.getElementById(divId)this.divObj.style.overflow="hidden"this.timelength=animatetimethis.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie valuethis.contentheight=parseInt(this.divObj.style.height)var thisobj=thisif (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.loadanimatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height}else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)this.divObj.style.height=0 //just collapse content if CSS "height" attribute availableif (persistexpand)animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")}animatedcollapse.prototype._getheight=function(persistexpand){this.contentheight=this.divObj.offsetHeightif (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)this.divObj.style.height=0 //collapse contentthis.divObj.style.visibility="visible"}else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work withthis.divObj.style.height=this.contentheight+"px"}animatedcollapse.prototype._slideengine=function(direction){var elapsed=new Date().getTime()-this.startTime //get time animation has runvar thisobj=thisif (elapsed<this.timelength){ //if time run is less than specified lengthvar distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)this.divObj.style.height=distancepercent * this.contentheight +"px"this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)}else{ //if animation finishedthis.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or notthis.runtimer=null}}animatedcollapse.prototype.slidedown=function(){if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped runningif (isNaN(this.contentheight)) //if content height not available yet (until window.onload)alert("Please wait until document has fully loaded then click again")else if (parseInt(this.divObj.style.height)==0){ //if content is collapsedthis.startTime=new Date().getTime() //Set animation start timethis._slideengine("down")}}}animatedcollapse.prototype.slideup=function(){if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped runningif (isNaN(this.contentheight)) //if content height not available yet (until window.onload)alert("Please wait until document has fully loaded then click again")else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expandedthis.startTime=new Date().getTime()this._slideengine("up")}}}animatedcollapse.prototype.slideit=function(){if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)alert("Please wait until document has fully loaded then click again")else if (parseInt(this.divObj.style.height)==0)this.slidedown()else if (parseInt(this.divObj.style.height)==this.contentheight)this.slideup()}// -------------------------------------------------------------------// A few utility functions below:// -------------------------------------------------------------------animatedcollapse.curveincrement=function(percent){return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input}animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)var tasktype=(window.addEventListener)? tasktype : "on"+tasktypeif (target.addEventListener)target.addEventListener(tasktype, functionref, false)else if (target.attachEvent)target.attachEvent(tasktype, functionref)}animatedcollapse.getCookie=function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn ""}animatedcollapse.setCookie=function(name, value, days){if (typeof days!="undefined"){ //if set persistent cookievar expireDate = new Date()var expstring=expireDate.setDate(expireDate.getDate()+days)document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()}else //else if this is a session only cookiedocument.cookie = name+"="+value}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><p><b>Example 1:</b></p><a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a><div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;"><!--Your DIV content as follows --><h3>Content inside DIV!</h3><h4>Note: CSS height attribute defined</h4></div><script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )var collapse1=new animatedcollapse("dog", 1000, false)</script><p><b>Example 2:</b></p><a href="javascript:collapse2.slideit()">Show/ Hide DIV</a><div id="cat" style="width: 300px; background-color: #99E0FB;"><!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV --><div style="padding: 0 5px"><h3>Content inside DIV!</h3><h3>Content inside DIV!</h3><h4>Note: No CSS height attribute defined. Persistence enabled.</h4></div></div><script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )var collapse2=new animatedcollapse("cat", 800, true)</script><p><b>Example 3:</b></p><a href="javascript:collapse3.slidedown()">Slide Down</a> || <a href="javascript:collapse3.slideup()">Slide Up</a><div id="fish" style="width: 300px; height: 150px; background-color: #99E0FB;"><!--Your DIV content as follows --><h3>Content inside DIV!</h3><h4>Note: DIV set not to collapse initially. Note that if "enablepersist" is enabled, cookie value overrides this setting.</h4></div><script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )var collapse3=new animatedcollapse("fish", 1000, false, "block")</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->