JQuery implements the method for switching between the side floating window and the middle floating window.

JQuery implements the method for switching between the side floating window and the middle floating window.

This article describes how jQuery implements the switching between a side-floating window and a middle-floating window. We will share this with you for your reference. The details are as follows:

Html section:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
JS section:
/* Set the chat window path */var swt_url = '/zixun/';/* side floating window */var str = '<div id = "swt_animation" style = "display: none; "> '; str + =' <a class =" close "onclick =" close_swt ('+ "'swt _ animation'" + '); "> X </a> '; str + =' <ul class =" swt_disease "> '; str + = '<li> <a target = "_ blank" href = "' + swt_url + '">  </a> </li> '; str + = '<li> <a target = "_ blank" href = "' + swt_url + '">  </a> </li> '; str + = '</ul>'; str + = '<ul class = "swt_disease"> '; str + = '<li> <a target = "_ blank" href = "' + swt_url + '">  </a> </li> '; str + = '<li> <a target = "_ blank" href = "' + swt_url + '">  </a> </li> '; str + = '</ul>'; str + = '<Ul class = "swt_disease"> '; str + = '<li> <a target = "_ blank" href = "' + swt_url + '">  </a> </li> '; str + = '<li> <a target = "_ blank" href = "' + swt_url + '">  </a> </li> '; str + = '</ul>'; str + = '<div class = "qq"> '; str + = '<a target = "_ blank" href = "http://wpa.qq.com/msgrd? V = 3 & uin = 1141202288 & site = qq & menu = yes ">  </a> '; str + = '</div> '; str + = '<div class = "tel"> <a href = "' + swt_url + '" target = "_ blank">  </a> </div> '; str + = '<div class = "ewm">  </div> '; str + = '</div>'; str + = '<styl E type = "text/css"> '; str + = 'body {_ background-attachment: fixed; _ background-image: url (about: blank );}'; str + = '# swt_animation {z-index: 9999; position: fixed! Important; right: 10px; top: 190px; _ position: absolute; _ top: expression (offsetParent. scrollTop) + 150); width: 128px; height: 473px; padding: 0 0 0 3px; background: # FFF; margin: 0; border: 2px solid # e6e6e6; text-align: left;} '; str + =' # swt_animation. close {cursor: pointer; position: absolute; top: 5px; right: 5px; display: block; width: 12px; height: 12px; text-decoration: none; font-size: 12px; text-align: center; line-height: 14px;} '; str + =' # swt_animation. close {cursor: pointer; position: absolute; top: 5px; right: 5px; display: block; width: 12px; height: 12px; text-decoration: none; font-size: 12px; text-align: center; line-height: 14px; z-index: 2;} '; str + =' # swt_animation. swt_disease {height: 69px; overflow: hidden; margin: 2px 0 0 0; padding: 0;} '; str + =' # swt_animation. swt_disease li {width: 63px; height: 69px; float: left; position: relative; list-style: none;} '; str + =' # swt_animation. swt_disease li img {position: absolute; top: 0; left: 0;} '; str + =' # swt_animation. qq, # swt_animation. tel {padding: 2px 0 0 0;} '; str + =' </style> ';/* close the side floating window */function close_swt (id) {document. getElementById (id ). style. display = "none"; setTimeout (function () {document. getElementById (id ). style. display = "block" ;}, 10000) ;};/* floating side floating window */var UAI = navigator. userAgent; var Agents = new Array ("Android", "iPhone", "SymbianOS", "Windows Phone"); for (var v = 0; v <Agents. length; v ++) {if (UAI. indexOf (Agents [v])> 0) {zx = 'yes'; break;} else {zx = 'OK' ;}} if (zx = 'OK ') {$ ('. swt_disease li img '). live ('mouseenter', function () {$ (this ). stop (). animate ({top: '-69px'}, "slow ");}). live ('mouseleave ', function () {$ (this ). stop (). animate ({top: '0px '}, "slow") ;}); document. writeln (str); setInterval (function () {var num = Math. ceil (Math. random () * 6); $ ('. swt_disease li img '). eq (num ). animate ({top: '-69px'}, "slow"); $ ('. swt_disease li img '). eq (num ). animate ({top: '0px '}, "slow") ;}, 4000) ;}/ * middle floating window */document. writeln ('<style type = "text/css">'); document. writeln ('# midpop {z-index: 10000; position: fixed; _ position: absolute; left: 50%; top: 49%; _ top: expression(eval(document.doc umentElement. scrollTop + 230); width: 419px; height: 340px; background: url (images/swtwin.gif) 0 0 no-repeat; right: 0px; margin-left:-229px; margin-top:-100px; z-index: 100000;} '); document. writeln ('. midclose {display: block; border: none; font-size: 0; line-height: 0; width: 27px; height: 22px; float: right; cursor: pointer ;} '); document. writeln ('</style>'); var midpop = '<div id = "midpop" style = "display: none;"> '; midpop + = '<a onClick = "javascript: hidemid ();" class = "midclose"/> </a> '; midpop + = '<a href = "' + swt_url + '" onclick = "LR_HideInvite (); openZoosUrl (); return false;" style = "display: block; height: 325px; "> </a> 'midpop + = '</div>'; document. write (midpop); setTimeout ("loadmid ()", 10000); setTimeout ("loadright ()", 0); function loadmid () {document. getElementById ("midpop "). style. display = "block"; setTimeout ("hideright ()", 0);} function hidemid () {document. getElementById ("midpop "). style. display = "none"; setTimeout ("loadmid ()", 30000); setTimeout ("loadright ()", 0);} function loadright () {document. getElementById ("swt_animation "). style. display = "block";} function hideright () {document. getElementById ("swt_animation "). style. display = "none ";}
: