In this paper, the method of realizing the switching effect of the side floating window and the floating window in jquery is described. Share to everyone for your reference, specific as follows:
HTML section:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
< html>
JS section:
/* Set 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 = ' <style 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 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 '}, "SL
ow ");
Live (' MouseLeave ', function () {$). 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.documentelement.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";}
Effect Chart:
More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage
I hope this article will help you with the jquery program design.