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


Posted in Javascript onSeptember 05, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
js实现微博发布小功能
Jan 12 Javascript
webpack入门必知必会
Jan 16 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 #Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 #Javascript
Vue.js每天必学之表单控件绑定
Sep 05 #Javascript
深入分析node.js的异步API和其局限性
Sep 05 #Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 #Javascript
JS锚点的设置与使用方法
Sep 05 #Javascript
You might like
PHP XML数据解析代码
2010/05/26 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
js判断是否是手机页面
2017/03/17 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
如何利用Python识别图片中的文字
2020/05/31 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
九年级化学教学反思
2014/01/28 职场文书
处级干部考察材料
2014/12/24 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python中的pprint模块
2021/11/27 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python