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

2024-10-23 17:11:10

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

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

jquery属性选择器not has怎么写行悬停高亮显示

复制代码代码如下: $(function(){ /* //$("html body div table.table_list tbody tr").not(":has('td a img[src*=tj.gif]')").mouseover(function(){ $("html body div table.table_list tbody tr:not(':has('td a img[src*=tj.gif]')')").mouseover
jQuery实现页面下拉100像素出现悬浮窗口的方法

本文实例讲述了jQuery实现页面下拉100像素出现悬浮窗口的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
jquery validate表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百
jquery 属性选择器（匹配具有指定属性的元素）

jQuery 选择器在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("
jQuery树形插件jquery.simpleTree.js用法分析

本文实例讲述了jQuery树形插件jquery.simpleTree.js用法.分享给大家供大家参考,具体如下: 最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现. 这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果同时这个树的节点
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

本文实例讲述了jQuery实现鼠标选中文字后弹出提示窗口效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-
jquery实现全选、不选、反选的两种方法

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(). 方法一:
jquery基本选择器匹配多个元素的实现方法

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document &
jQuery 属性选择器element[herf*='value']使用示例

一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: 复制代码代码如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style typ
jQuery中复合属性选择器用法实例

本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码代码如下: [selector1][selector2][selectorN] 参数列表: 参数描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码代码如下: <!DOCTYPE html> <html&g

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

相关推荐

随机推荐