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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
在小程序中推送模板消息的实现方法
Jul 22 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php常用图片处理类
2016/03/16 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
历史系自荐信范文
2013/12/24 职场文书
医院实习介绍信
2014/01/12 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
中文教师求职信
2014/02/22 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
个人查摆剖析材料
2014/10/04 职场文书
离婚案件答辩状
2015/05/22 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书