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

2020-05-29 07:06:34易采站长站整理

本文实例讲述了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;}';