`

JQ 侧浮窗与中浮窗切换

阅读更多

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

效果图:



 

 

  • 大小: 85.1 KB
  • 大小: 48.1 KB
2
2
分享到:
评论

相关推荐

    JQ 中部浮窗

    "JQ中部浮窗"这个主题涉及到如何在网页的中间位置实现一个始终可见的浮动窗口,这在网页设计中常用于显示通知、广告或者重要的信息提示。 首先,我们需要理解jQuery的基本用法。jQuery库通过提供简洁的API来操作DOM...

    JQ 中间浮窗精简版

    《JQ 中间浮窗精简版》是一个针对前端开发的实用工具,...通过深入研究这个JQ中间浮窗精简版,开发者可以学习到如何创建自己的自定义浮窗,提升前端开发技能,并将其应用到实际项目中,以提升网站或应用的用户体验。

    jq侧边导航栏

    在jq侧边栏的实现中,我们可能需要用到以下核心知识点: 1. **DOM操作**:jQuery提供了简便的方法来选择、操作和修改HTML元素。例如,`$("#sidebar")` 可以选取id为"sidebar"的侧边栏元素,然后可以使用`.append()`...

    JQ 左右中下四个浮窗

    标题“JQ 左右中下四个浮窗”暗示了这个话题主要围绕使用jQuery(简称JQ)实现页面上的四个浮动窗口布局。这通常是指在网页设计中,将四个独立的窗口或元素设置为浮动状态,使其能够在用户滚动页面时保持在屏幕的...

    JQ 最少代码实现中部浮窗功能

    本篇文章将深入探讨如何利用JQ最少的代码实现中部浮窗(也称中间弹窗或悬浮框)功能。中间浮窗通常用于显示重要的通知、广告或者用户交互内容,它会始终保持在屏幕中央,即使页面滚动也是如此。 首先,我们需要创建...

    jQuery百叶窗切换效果焦点图代码.zip

    《jQuery百叶窗切换效果焦点图代码实现详解》 在网页设计中,动态效果往往能够提升用户体验,其中焦点图作为展示重要信息或吸引用户注意力的一种常见元素,其设计至关重要。"jQuery百叶窗切换效果焦点图代码"便是一...

    基于JQ的大图横向切换效果

    "基于JQ的大图横向切换效果"是一个使用JQuery库实现的 banner(横幅)特效,它为网站的首屏或者其他重要区域提供了一种优雅的方式来展示多张大图,并且通过平滑的动画效果进行切换,从而增加网站的互动性和吸引力。...

    JQ tab标签切换

    本文将深入探讨JQ Tab标签切换的实现原理、代码结构以及如何在实际项目中应用。 首先,我们需要了解jQuery库。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在JQ...

    jq代码图片切换

    在这个"jq代码图片切换"的主题中,我们将深入探讨如何利用jQuery实现动态的图片切换效果,这是一种常见的增强用户体验的交互功能。 首先,我们需要理解jQuery的基本用法。jQuery的核心思想是"Write Less, Do More...

    jQ多种相册切换效果.rar

    jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换效果.rar jQ多种相册切换...

    侧边栏页面切换

    在IT行业中,侧边栏(Sidebar)是一种常见的用户界面元素,尤其在移动应用和现代Web设计中被广泛采用。它通常位于屏幕的一侧,提供导航菜单,帮助用户快速访问不同的功能区域或页面。"侧边栏页面切换"是实现这种交互...

    jq滑动切换页面

    在网页设计和开发中,用户交互体验是一个至关重要的因素,其中滑动切换页面效果能为网站增添流畅性和吸引力。`jQuery` 是一款广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果等任务,使得创建动态...

    jQ品牌logo列表选项卡切换.zip

    在jQ品牌logo列表选项卡切换中,每个选项卡对应一组品牌logo,当用户选择不同的选项卡时,对应的logo列表会显示出来,而其他列表则隐藏,提高了用户浏览的效率。 具体实现这个功能,开发者可能使用了以下技术: 1....

    JQ触摸左右切换图片

    【JQ触摸左右切换图片】是一种常见的网页交互设计,它结合了jQuery库的高效性和现代设备的触摸功能,为用户提供了一种流畅的图片浏览体验。这个功能尤其适用于响应式网站和移动应用,使得用户可以通过手势(如滑动或...

    JQ版tab切换,三个格式切换效果

    在实际应用中,使用JQ版tab切换的步骤通常包括以下几个部分: 1. **引入jQuery库**:首先确保网页中已经包含了jQuery库,可以通过CDN链接或者本地引入。 2. **引入tab切换插件**:将"tabulous.js"文件引入到HTML中...

    jquery百叶窗图片切换.rar

    在网页设计中,动态的图片切换效果能够极大地提升用户体验,其中“百叶窗”效果以其独特的视觉体验备受青睐。本教程将深入探讨如何利用JavaScript库jQuery实现这一效果,特别是针对“jquery百叶窗图片切换”这一主题...

    jquery网页内飘窗代码

    使用代码前必须引用jquery ,代码放在页面底部就行,亲测好用.

    网页图片动态切换包含jq诸多特效

    综上所述,"网页图片动态切换包含jq诸多特效"是一个涵盖广泛技术点的主题,涉及到网页设计中的交互体验、动态效果、DOM操作、动画原理等多个方面,通过学习和掌握这些知识,可以显著提升网页的视觉效果和用户交互性...

Global site tag (gtag.js) - Google Analytics