初学jQuery，觉得挺有意思的，然后就做了...这个！
试试窗口resize，也挺有意思的！
请给位多多指教！！
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>mymenu</title>
<link type="text/css" rel="stylesheet" href="menu.css" />
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body style="overflow:hidden">
<div id="right" class="window">
<div class="title">
<img src="images/close.gif" alt="关闭" />
温馨提示！
</div>
<div class="context">
欢迎光临烟灰网（www.yanhui.com）!!
</div>
</div>
</body>
</html>
javascript:
jQuery(document).ready(function(){
var rightwin=jQuery("#right");
var windowobj=jQuery(window);
var cwinWidth=rightwin.width();
var cwinHeight=rightwin.height();
var browserWidth=windowobj.width();
var browserHeight=windowobj.height();
var scrollLeft=windowobj.scrollLeft();
var scrollTop=windowobj.scrollTop();
rightwin.mywin({left:"right",top:"bottom"},
function(){
rightwin.hide(1000);
},{left:browserWidth-cwinWidth-5,top:browserHeight}
).fadeOut(30000).dequeue();
});
/* name:mywin插件
* 参数position：窗口显示的最终位置{left：XX，top：XX}
* 参数hidefunc：关闭时调用的函数
* 参数initPos： 窗口初位置{left：XX，top：XX}
*/
jQuery.fn.mywin=function(position,hidefunc,initPos){
if(position && position instanceof Object){
var positionleft=position.left;
var positiontop=position.top;
var left;
var top;
var windowobj=$(window);
var currentwin=this;
var cwinWidth=this.outerWidth(true);
var cwinHeight=this.outerHeight(true);
var browserWidth; //浏览器宽度
var browserHeight; //浏览器高度
var scrollLeft; //
var scrollTop; //
//计算浏览器可视区域位置
function getWinDin(){
browserWidth=windowobj.width();
browserHeight=windowobj.height();
scrollLeft=windowobj.scrollLeft();
scrollTop=windowobj.scrollTop();
}
//计算浏览器的左边距
function callLeft(positionleft,browserWidth,scrollLeft,cwinWidth){
if(positionleft && typeof positionleft=="string"){
if(positionleft=="center"){
left=(browserWidth-cwinWidth)/2;
}
else if(positionleft=="left"){
left=0;
}
else if(positionleft=="right"){
left=browserWidth-cwinWidth;
}
}
else if(positionleft && typeof positionleft=="number"){
top=positionleft;
}else{
left=(browserWidth-cwinWidth)/2;
}
}
//计算浏览器的上边距
function callTop(positiontop,browserHeight,scrollTop,cwinHeight){
if(positiontop && typeof positiontop=="string"){
if(positiontop=="center"){
top=(browserHeight-cwinHeight)/2;
}
else if(positiontop=="top"){
top=0
}
else if(positiontop=="bottom"){
top=browserHeight-cwinHeight;
}
}
else if(positiontop && typeof positiontop=="number"){
top=positiontop;
}else{
top=(browserHeight-cwinHeight)/2;
}
}
//移动窗口的位置
function movewin(){
callLeft(currentwin.data("positionleft"),browserWidth,scrollLeft,cwinWidth);
callTop(currentwin.data("positiontop"),browserHeight,scrollTop,cwinHeight);
currentwin.animate({
left:left-5,
top: top
},2000);
}
//拖动窗口滚动条后重新调整窗口的相对位置
var scrolltimeout;
$(window).scroll(function(){
if(!currentwin.is(":visible")){
return;
}
clearTimeout(scrolltimeout);
scrolltimeout=setTimeout(function(){
getWinDin();
movewin();
},2000);
});
//浏览器窗口太小变化时重新调整窗口的相对位置
$(window).resize(function(){
if(!currentwin.is(":visible")){
return;
}
getWinDin();
movewin();
});
//点击关闭图标关闭窗口时间
currentwin.children(".title").children("img").click(
function(){
if(!hidefunc){
currentwin.hide(1000);
}else{
hidefunc();
}
});
//初始化窗口的位置
if(initPos && initPos instanceof Object){
var initleft=initPos.left;
var inittop=initPos.top;
if(initleft && typeof initleft=="number"){
currentwin.css("left",initleft);
}else{
currentwin.css("left",0);
}
if(inittop && typeof inittop=="number"){
currentwin.css("top",inittop);
}else{
currentwin.css("top",0);
}
currentwin.show();
}
currentwin.data("positionleft",positionleft);
currentwin.data("positiontop",positiontop);
getWinDin();
movewin();
return currentwin;
}
}
css文件：
.window{
background-color:#D0DEF0;
width:251px;
pending:2px;
margin:2px;
position:absolute;
display:none;
}
.title{
font-size:10pt;
height:10px;
width:250px;
pending:2px;
}
.title img{
float:right;
cursor:pointer;
}
.context{
background-color:white;
height:200px;
width:250px;
border:2px solid #D0DEF0;
overflow:auto;
}
分享到：
相关推荐
在“jQuery实现徐徐升起的qq消息框”这个主题中，我们将探讨如何利用jQuery来创建一种类似QQ消息框的效果，即消息框会从页面底部缓慢升起，以吸引用户的注意力。以下是对这一技术的详细解释： 1. **基本结构**：...
1. **窗体展开**：窗口从一个点逐渐扩大至全屏，如同画卷徐徐展开，增加了打开过程的仪式感。 2. **拉幕**：类似剧场舞台的幕布缓缓升起，为应用的启动营造出剧场般的氛围。 3. **中心点变大**：窗口以中心点为轴心...
在Android开发中，`ClipDrawable`是一个非常实用的控件，它允许开发者实现图片的渐进式显示，也就是我们所说的“徐徐展开”效果。这种效果常见于许多应用的加载图标或者滑动条中，通过控制图片部分的显示来达到动态...
在Web开发领域，创建引人注目的用户交互体验至关重要，其中一种常见的手法是设计...通过深入学习JQuery实战第六讲：窗口效果中的内容，开发者将能够熟练掌握并应用这些技术，从而在Web界面设计上展现出更高的专业水平。
报告标题：“汽车行业2020年半年度投资策略报告：徐徐复苏，行稳致远” 这份报告聚焦于2020年上半年中国汽车行业的投资策略，分析了行业在新冠疫情冲击下的表现，以及逐步复苏的趋势。报告内容可能涵盖以下几个关键...
20210601-安信证券-中国中免-601888-聚焦四大成长点，免税巨头进击之路徐徐铺开.pdf
《徐徐拉开的Flash帷幕》 在信息技术的舞台上，Flash曾是一颗璀璨的明星，以其独特的动画制作能力和互动性赢得了广泛赞誉。今天，我们来深入探讨一下这个曾经风靡一时的技术，揭开“Flash帷幕”背后的秘密。 Flash...
从提供的文件信息来看，这份汽车行业2020年半年度投资策略报告内容丰富，涵盖了汽车行业的各个方面。...同时，报告也提示了潜在的风险点，并给出了具体的投资建议，对汽车行业投资策略具有指导意义。
Fightball是一款简单而有趣的Android应用，用户在启动时会看到屏幕底部不断升起的气球，通过点击气球来进行交互，气球消失则得分。这款应用巧妙地融合了线程管理、自绘组件以及面向对象的设计思想，为开发者提供了...
本文将深入探讨四种特定的K线形态：冉冉上升形、徐徐下降形、徐缓上升形以及徐缓下降形，这些都是基于K线组合的技术分析概念。 冉冉上升形是一种预示股价即将上涨的K线组合。这种形态通常在股价经历一段时间的横向...
藏经阁-智能营销：徐徐展开的画卷 智能营销是当前市场上最热门的话题之一，阿里云作为一家领先的云计算公司，也在智能营销领域中发挥着重要作用。那么，什么是智能营销？智能营销是指通过大数据、人工智能、云计算...
汽车行业专题报告：千亿座椅市场的国产替代之路徐徐开启.docx
例如，可以将“纷纷扬扬”与“徐徐升起”、“慢慢落下”等词进行比较，让学生理解它们之间的相似性与差异性，并尝试用这些词造句，以锻炼他们的语言组织能力。 例如： 1. 风吹过，树叶纷纷扬扬地飘落，就像秋天的...
【菱电电控深度研究——国产EMS加速替代，汽车电子布局徐徐展开】 菱电电控，一家专注于发动机管理系统（EMS）的国产供应商，正在经历从传统动力向电动化与智能化转型的关键时期。公司凭借其在发动机管理领域的深厚...
随着5G技术的发展，车联网的能力将得到显著提升，实现车与车(V2V)、车与基础设施(V2I)、车与人(V2P)的实时通信，提高道路安全，减少交通拥堵，并为自动驾驶提供强大的数据支持。例如，通过V2V通信，车辆可以提前得知...
在2020年的汽车行业，投资策略的主题是“冰雪消融，暖风徐徐”，这预示着在经历了寒冬般的挑战后，市场开始逐步复苏，投资机会逐渐显现。这一策略聚焦于行业趋势、政策变化、技术创新以及市场需求等方面，旨在为投资...
20210307-平安证券-绿色经济系列专题（一）：碳中和，四十年投资蓝图徐徐展开.pdf
【计算机行业深度报告：AIOT产业万亿市场徐徐打开（2021）】 报告指出，AIOT（人工智能物联网）产业正处于快速发展阶段，这得益于AI技术的不断进步、物联网传感器成本的降低、数据处理能力的增强以及5G网络的普及。...
二季度宏观经济报告：经济开局稳中有缓，还待政策徐徐发力-0329-渤海证券-23页.pdf
本专题《绿色经济系列专题（一）：碳中和，四十年投资蓝图徐徐展开》将深入探讨这一主题，揭示未来四十年碳中和路径中的投资机遇与挑战。 首先，我们需要理解碳中和的概念。碳中和是指一个国家或地区在一定时间内...