This article mainly introduces the JS implementation from the right to the left slowly surfaced web page floating layer advertising method, you can realize the right floating advertising timing pop-up and click to expand, folding and other functions, very practical value, the need for Friends can refer to:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> slowly surfaced from right to left floating layer advertisement </title> <script language=" JavaScript "> var $ = function (d) {return document.getElementById (d)}; var cls={create:function () {The return function () {this. $ADD = function (fn) {Cls.add (THIS,FN)}; this.init.apply (this, Argu ments); }, Add:function (OBJ,FN) {fn.apply (obj,arguments);}, Enterframe:function () {this.onenterframe=function () {}; this.$ Play = function (g) {THIS.ENTERFRAMEP = THIS.ENTERFRAMEP | | Clstimeindex = CLS.ontimes.length; CLS.ontimes.push (this); Window.cleartimeout (this.enterframetimeout); Window.clearinterval (This.enterframeinterval); if (g) This.enterframetimeout = Window.settimeout (' cls.ontimes[' +this. clstimeindex+ '].enterframeinterval=window.setinterval ("CLS.ontimes [' +this. clstimeindex+ '].onenterframe () ", ' +this.enterframep+ ') ', parseint (g*1000)); else This.enterframeinterval = Window.setinterval ("cls.ontimes[" +this. clstimeindex+ "].onenterframe ()", THIS.ENTERFRAMEP); this. $STOP = function () {window.clearinterval (this.enterframeinterval);} this. $SET = function (p) {THIS.ENTERFRAMEP = P }, Ontimes:new Array ()}; Cls. Marquee = Cls.create (); Cls. Marquee.prototype = {Init:function (button,box,speed) {This.box = $ (box); this.tit = $ (Button) This.kong = $ ("kong"); thi S.onopen = true; This.show = false; This.time = 0; This.speed = speed; This.kong.style.height = this.box.offsetHeight + "px"; This. Maxw = This.box.offsetwidth-this.tit.offsetwidth; This.box.style.right =-this.box.offsetwidth + "px"; This.boxtop = This.kong.offsetTop; var _t = this; This.tit.onclick = function () {this.show = true; if (_t.onopen) {_t.onenterframe = _t.close; _t.onopen = false;} else{_t.onenterframe = _t.open; _t.onopen = true;} _t. $PLAY (); }; this. $ADD (cls.enTerframe); This.onenterframe = This.open; this. $PLAY (); }, Open:function () {This.tit.innerHTML = "-"; var _r = parseint (this.box.style.right); var _b = (0-_r)/30; this.box.styl E.right = (_r + _b) + "px"; This.kong.style.top = (Document.documentElement.scrollTop + this.boxtop) + "px"; if (_b==0 &&!this.show) {this.time +=10; if (this.time>=this.speed*1000) {this.show = true; This.onopen = False ; this. $STOP (); This.onenterframe = This.close; this. $PLAY (); }}, Close:function () {This.tit.innerHTML = "+"; var _r = parseint (this.box.style.right); var _b = (-this. MAXW-_r)/5; This.box.style.right = Math.Round (_r + _b) + "px"; This.kong.style.top = (Document.documentElement.scrollTop + this.boxtop) + "px"; } }; Window.onload = function () {settimeout (function () {new CLS. Marquee ("Tit", "abc", 10)},3000); Tit is the click of the button ID, ABC is floating block id,10 is displayed when the length}; </script> <style type= "Text/css" > <!--#abc {border:1px solid #003399; position:absolute; height:150px; width:220px; Right:-10%; #abc #tit {background-color: #0066FF; position:relative; height:100%; width:20px; color: #FFFFFF; text-align:center ; Float:left; #kong {position:absolute; width:100%; top:100px; overflow:hidden; top:100px; right:0px;} right {float:right; width:190px; padding:5px; }--> </style> </head> <body style= "margin:0px;" > <!--floating box outside a layer to prevent horizontal scroll bars from appearing--> <div id= Kong > <!--floating box--> <div abc > Id= <div id= </div> <div class= "right" > <a href= "/" > page pop-up ad box effect </a></div> </div> </ Div> right ads 3 seconds after pop-up </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
