index.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右中下浮窗</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<base target="_blank" />
</head>
<body>
<div style="height:10000px;"></div>
<style type="text/css">
/*js style*/
.j-fixleft{ width:126px; height:420px; position:fixed; display:none;}
.j-fixright{ width:131px; height:473px; border:2px solid #e6e6e6; position:fixed; background-color:#fff; display:none;}
.j-fixright ul{ width:125px; height:69px; overflow:hidden; margin:2px auto 0 auto;}
.j-fixr-position{ position:relative;}
.j-fixr-close{ position:absolute; right:3px; top:3px; width:11px; height:11px; display:block;}
.j-fixright ul li{ position:relative; width:62px; height:69px; overflow:hidden;}
.j-fixright ul li img{ position:absolute; top:0; left:0;}
.j-fixr-qq{ width:125px; height:55px;}
.j-fixr-tel{ width:125px; height:53px;}
.j-fixr-box{ width:125px; height:145px;}
.j-fixr-qq,.j-fixr-tel,.j-fixr-box{ width:125px; margin:0 auto; padding:0; overflow:hidden; padding-top:2px;}
.j-fixcenter{ width:419px; height:340px; position:fixed; display:none;}
.j-fixfooter{ width:100%; height:55px; position:fixed; left:0; bottom:0; z-index:999; display:none;}
.j-fixfoot{ width:100%; height:55px; background:url(img/fix/fixfooter_bg3.png) repeat-x; position:relative;}
.j-fixf{ width:1072px; height:55px; background:url(img/fix/fixfooter.png) no-repeat; margin:0 auto; z-index:99999; position:relative;}
.j-fixf-but1{ position:absolute; left:562px; top:19px;}
.j-fixf-but2{ position:absolute; left:684px; top:19px;}
.j-fixfoot-bg{ width:100%; height:130px; background:url(img/fix/fixfooter_bg2.png); margin:0 auto; position:absolute; top:-103px; left:0; z-index:-1; display:none;}
.j-fixfoot-bg img{ display:block; margin:0 auto;}
</style>
<div class="j-fixleft" id="fixLeft">
<img src="img/fix/fixleft.gif" usemap="#fixLeftMap">
<map name="fixLeftMap" id="fixLeftMap">
<area shape="rect" coords="101,0,126,20" href="javascript:void();" id="closeFixLeft" target="_self" />
<area shape="rect" coords="0,0,100,20" href ="/zixun/" />
<area shape="rect" coords="0,21,126,420" href ="/zixun/" />
</map>
</div>
<div class="j-fixright" id="fixRight">
<ul class="j-fixr-position">
<li class="g-fl"><a href="/zixun/"><img src="img/fix/fixr_icon1.jpg" /></a></li>
<li class="g-fr" ><a href="/zixun/"><img src="img/fix/fixr_icon2.jpg" /></a></li>
<span class="j-fixr-close g-fr" id="closeFixRight"><img src="img/fix/fixr_close.gif" /></span>
</ul>
<ul>
<li class="g-fl"><a href="/zixun/"><img src="img/fix/fixr_icon3.jpg" /></a></li>
<li class="g-fr"><a href="/zixun/"><img src="img/fix/fixr_icon4.jpg" /></a></li>
</ul>
<ul>
<li class="g-fl"><a href="/zixun/"><img src="img/fix/fixr_icon5.jpg" /></a></li>
<li class="g-fr"><a href="/zixun/"><img src="img/fix/fixr_icon6.jpg" /></a></li>
</ul>
<div class="j-fixr-qq">
<a href="http://wpa.qq.com/msgrd?v=3&uin=1141202288&site=qq&menu=yes"><img src="img/fix/fixr_qq.gif" /></a>
</div>
<div class="j-fixr-tel">
<a href="/zixun/"><img src="img/fix/fixr_tel.jpg" /></a>
</div>
<div class="j-fixr-box">
<img src="img/fix/fixr_box.jpg" />
</div>
</div>
<div id="fixCenter" class="j-fixcenter">
<img src="img/fix/fixcenter.gif" width="419" height="340" usemap="#fixCenterMap">
<map name="fixCenterMap" id="fixCenterMap">
<area shape="rect" coords="392,0,419,21" href="javascript:void();" id="closeFixCenter" target="_self" />
<area shape="rect" coords="0,0,391,21" href ="/zixun/" />
<area shape="rect" coords="0,22,419,340" href ="/zixun/" />
</map>
</div>
<div id="fixFooter" class="j-fixfooter">
<div class="j-fixfoot" id="fixFooterHover">
<div class="j-fixfoot-bg" id="fixFooterHoverBg"><a href="/zixun/"><img src="img/fix/fixfooter_bg.png" /></a></div>
<div class="j-fixf">
<a href="/zixun/" class="j-fixf-but1"><img src="img/fix/fixfooter_but1.gif" /></a>
<a href="/zixun/" class="j-fixf-but2"><img src="img/fix/fixfooter_but2.gif" /></a>
</div>
</div>
</div>
<!--[if (gte IE 7)|!(IE)]><!-->
<script type="text/javascript" src="js/demo.js"></script>
<!--<![endif]-->
</body>
</html>
demo.js
$(function(){
fixWindow();
});
$(window).resize(function(){
fixWindowGetPosition();
});
function fixWindow(){
fixWindowGetPosition();
//中间浮窗
var fixCenter = $("#fixCenter");
//显示时间
fixCenter.delay(10000).fadeIn(600);
$("#closeFixCenter").click(function(){
fixCenter.fadeOut(600);
//再次显示的时间
//fixCenter.fadeOut(600).delay(30000).fadeIn(600);
});
//左浮窗
var fixLeft = $("#fixLeft");
fixLeft.fadeIn(600);
$("#closeFixLeft").click(function(){
fixLeft.fadeOut(600);
});
//右浮窗
var fixRight = $("#fixRight");
fixRight.fadeIn(600);
$("#closeFixRight").click(function(){
fixRight.fadeOut(600);
});
$("#fixFooter").show(0);
}
function fixWindowGetPosition(){
var h = $(window).height();
var w = $(window).width();
//中间浮窗
var fixCenter = $("#fixCenter");
var fixCenterLeft = (w/2) - parseInt(fixCenter.css("width")) / 2;
var fixCenterTop = (h/2) - parseInt(fixCenter.css("height")) / 2;
fixCenter.css({"left":(fixCenterLeft) + "px", "top": (fixCenterTop) + "px" });
//左浮窗
var fixLeft = $("#fixLeft");
var fixLeftLeft = 0;
var fixLeftTop = (h/2) - parseInt(fixLeft.css("height")) / 2-50;
fixLeft.css({"left":(fixLeftLeft) + "px", "top": (fixLeftTop) + "px" });
//右浮窗
var fixRight = $("#fixRight");
var fixRightRight = 0;
var fixRightTop = (h/2) - parseInt(fixRight.css("height")) / 2-40;
fixRight.css({"right":(fixRightRight) + "px", "top": (fixRightTop) + "px" });
}
//右浮窗的图片特效
!function(){
$(".j-fixright ul li img").on("mouseenter",function(){
$(this).stop().animate({top: "-69px"},"slow");
}).on("mouseleave",function(){
$(this).stop().animate({top:"0px"},"slow");
});
setInterval(function(){
var num = Math.ceil(Math.random()*6);
$(".j-fixright ul li img").eq(num-1).animate({top: "-69px"},"slow");
$(".j-fixright ul li img").eq(num-1).animate({top: "0px"},"slow");
},4000);
}();
//底部鼠标经过的效果
!function(){
$("#fixFooterHover").on("mouseenter",function(){
$("#fixFooterHoverBg").show();
}).on("mouseleave",function(){
$("#fixFooterHoverBg").hide();
});
}();
效果图：
相关推荐
在IT领域，尤其是在网页开发中，"JQ 侧浮窗与中浮窗切换"是一个常见的交互设计功能。这里的"JQ"通常指的是jQuery，一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。这个功能涉及到的是如何在用户...
"JQ中部浮窗"这个主题涉及到如何在网页的中间位置实现一个始终可见的浮动窗口，这在网页设计中常用于显示通知、广告或者重要的信息提示。 首先，我们需要理解jQuery的基本用法。jQuery库通过提供简洁的API来操作DOM...
《JQ 中间浮窗精简版》是一个针对前端开发的实用工具，...通过深入研究这个JQ中间浮窗精简版，开发者可以学习到如何创建自己的自定义浮窗，提升前端开发技能，并将其应用到实际项目中，以提升网站或应用的用户体验。
本篇文章将深入探讨如何利用JQ最少的代码实现中部浮窗（也称中间弹窗或悬浮框）功能。中间浮窗通常用于显示重要的通知、广告或者用户交互内容，它会始终保持在屏幕中央，即使页面滚动也是如此。 首先，我们需要创建...
jq左右移动切换 有按钮，jq左右移动切换 有按钮，jq左右移动切换 有按钮
然而，这个"JQ 页面上下左右居中的插件"可能使用了JavaScript/jQuery来动态计算和设置元素的`top`和`left`属性，以实现元素在父容器中的绝对定位，达到四方向居中的效果。 插件的运作原理可能如下： 1. 获取需要...
【JQ触摸左右切换图片】是一种常见的网页交互设计，它结合了jQuery库的高效性和现代设备的触摸功能，为用户提供了一种流畅的图片浏览体验。这个功能尤其适用于响应式网站和移动应用，使得用户可以通过手势（如滑动或...
"jq文字滚动大全（上下左右及可控）"这个主题涉及到的是使用JavaScript库jQuery实现的文字滚动效果，它提供了丰富的选项来创建各种滚动动画，如上下、左右滚动，并且用户可以控制滚动速度和方向，使得滚动效果更加...
使用代码前必须引用jquery ，代码放在页面底部就行，亲测好用.
JQ 滑动菜单
JQ左右实现点击切换模块
标题“jq效果三四个”表明我们要探讨的是四个基于jQuery的特效，这些特效主要应用于图片展示和导航菜单。 首先，让我们详细了解一下这些特效： 1. **焦点图（图片轮转）**： 这种效果是一种常见的网页设计元素，...
同时，焦点图提供了四个箭头，分别代表上、下、左、右四个方向的切换，用户可以通过点击这些箭头来浏览不同位置的图片，增加用户操作的灵活性和自由度。 【核心知识点】： 1. **jQuery库**：jQuery是一个广泛使用的...
在"jq带左右按钮带缩略图的图片切换"中，jQuery库扮演着核心角色，帮助我们实现图片的动态切换和缩略图的联动。 1. **图片切换**：此功能通常基于CSS和JavaScript实现，通过改变图片的显示或隐藏状态来实现图片的...
总的来说，jq6500语音芯片是一个功能强大的音频处理元件，配合相应的驱动程序和开发资源，开发者可以轻松地在各种项目中集成语音功能。从压缩包提供的资料来看，无论是初学者还是经验丰富的工程师，都能找到足够的...
`jq`是一款强大的命令行JSON处理器，用于在命令行界面中查看、操作和转换JSON数据。这个`jq安装包rpm.rar`是一个包含了`jq`工具的RPM（Red Hat Package Manager）格式的压缩包，主要面向使用Linux发行版如CentOS、...
在网页设计中，jQuery 是一个非常流行的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果和Ajax交互等任务。"jquery 特效，实现可左右移动的tab效果"是一个常见的用户界面功能，用于提供更友好的用户体验，...
"多种JQ弹方式"暗示这个压缩包中可能包含了多种弹窗效果，比如淡入淡出、滑动、旋转等动态效果，以及不同触发机制，例如点击按钮、页面加载完毕、Ajax请求完成后等场景触发弹窗。这样的设计使得弹窗插件能够更好地...