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

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

html部分：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

浮动窗

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 += '

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 += '';

/*关闭侧边浮窗*/

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('

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('');

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";}

效果图：

希望本文所述对大家jQuery程序设计有所帮助。