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

2019-11-20 09:04:29

字体：大中小

来源：转载

供稿：网友

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

html部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>浮动窗</title></head><body><div style="height:3000px;"></div><script type="text/javascript" src="library.js"></script><script type="text/javascript" src="public.js"></script></body></html>

JS部分：

/*设置聊天窗口路径*/var swt_url = '/zixun/';/*侧边浮窗*/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+'"><img src="images/b1.jpg" width="62" height="138" border="0" alt="" /></a></li>';str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b2.jpg" width="62" height="138" border="0" alt="" /></a></li>';str += '</ul>';str += '<ul class="swt_disease">';str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b3.jpg" width="62" height="138" border="0" alt="" /></a></li>';str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b4.jpg" width="62" height="138" border="0" alt="" /></a></li>';str += '</ul>';str += '<ul class="swt_disease">';str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b5.jpg" width="62" height="138" border="0" alt="" /></a></li>';str += '<li><a target="_blank" href="'+swt_url+'"><img src="images/b6.jpg" width="62" height="138" border="0" alt="" /></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"><img src="images/q.gif" width="125" height="55" border="0" alt="" /></a>';str += '</div>';str += '<div class="tel"><a href="'+swt_url+'" target="_blank"><img src="images/t.jpg" width="125" height="53" border="0" alt="" /></a></div>';str += '<div class="ewm"><img src="images/e.jpg" width="125" height="145" border="0" alt="" /></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>';/*关闭侧边浮窗*/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 < 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);}/*中间浮窗*/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";}

效果图：