jQuery实现侧浮窗与中浮窗切换效果的方法

这篇文章主要介绍了jQuery实现侧浮窗与中浮窗切换效果的方法,涉及jQuery针对页面元素的动态操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现侧浮窗与中浮窗切换效果的方法。分享给大家供大家参考，具体如下：

html部分：

   浮动窗

JS部分：

 /*设置聊天窗口路径*/ var swt_url = '/zixun/'; /*侧边浮窗*/ var str = ''; str += 'X'; str += ''; str += '
'; str += '
'; str += '
'; str += ''; str += '
'; str += '
'; str += '
'; str += ''; str += '
'; str += '
'; str += '
'; str += ''; str += ''; str += '
'; str += '
'; str += '
'; str += '
'; str += ''; /*关闭侧边浮窗*/ function close_swt(id){ document.getElementById(id).style.display = "none"; setTimeout(function(){ document.getElementById(id).style.display = "block"; },10000); }; /*浮动侧边浮窗*/ var UAI = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone"); for(var v = 0; 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); } /*中间浮窗*/ document.writeln(''); var midpop=''; midpop+=''; midpop+='' midpop+='
'; 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";}