模拟窗口效果 Jquery

<!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><title>模拟窗口效果</title><script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {var centerwin = $("#center");var leftwin = $("#left");$("#centerpop").click(function () {centerwin.show("slow");});$("#leftpop").click(function () {leftwin.slideDown("slow");});setTimeout(function () {centerwin.mywin({ left: "center", top: "center" });leftwin.mywin({ left: "left", top: "top" }, function () {$("#left").slideUp();});var windowobj = $(window);var currentwin = $("#right");var browserwidth = windowobj.width();var browserheight = windowobj.height();var scrollLeft = windowobj.scrollLeft();var scrollTop = windowobj.scrollTop();var cwinwidth = currentwin.outerWidth(true); //为true的话包含margin的值var cwinheight = currentwin.outerHeight(true);$("#right").mywin({ left: "right", top: "bottom" },function () { $("#right").hide(); },{ left: scrollLeft + browserwidth - cwinwidth, top: scrollTop + browserheight }).fadeOut(15000).dequeue();}, 200);});/***@param position表示窗口最终的位置包含两个属性，一个是left一个是top；*@param hidefuc表示执行窗口影藏的方法；*@param initPos表示窗口的初始位置，包含2个属性，一个是left一个是top；*/$.fn.mywin = function (position, hidefuc, initPos) {if (position && position instanceof Object) {var left;var top;var windowobj = $(window);var currentwin = this;var cwinwidth; //为true的话包含margin的值var cwinheight;var browserwidth;var browserheight;var scrollLeft;var scrollTop;function getBrowserDim() {browserwidth = windowobj.width();browserheight = windowobj.height();scrollLeft = windowobj.scrollLeft();scrollTop = windowobj.scrollTop();}//浏览器可视区域的宽度和高度//当前窗框的宽和高//要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值var positionleft = position.left;var positiontop = position.top;//计算窗口真实的左边界值function callLeft(positionleft, scrollLeft, browserwidth, cwinwidth) {if (positionleft && typeof positionleft == "string") {if (positionleft == "center") {left = scrollLeft + (browserwidth - cwinwidth) / 2;} else if (positionleft == "left") {left = scrollLeft;} else if (positionleft == "right") {left = scrollLeft + browserwidth - cwinwidth;} else {left = scrollLeft + (browserwidth - cwinwidth) / 2;}} else if (positionleft && typeof positionleft == "number") {left = positionleft;} else {left = 0;}}//计算窗口真实的上边界值function callTop(positiontop, scrollTop, browserheight, cwinheight) {if (positiontop && typeof positiontop == "string") {if (positiontop == "center") {top = scrollTop + (browserheight - cwinheight) / 2;} else if (positiontop == "top") {top = scrollTop;} else if (positiontop == "bottom") {top = scrollTop + browserheight - cwinheight;} else {top = scrollTop + (browserheight - cwinheight) / 2;}} else if (positiontop && typeof positiontop == "number") {top = positiontop;} else {top = 0;}}//移动窗口function moveWin() {callLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);callTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);currentwin.animate({left: left,top: top}, 600);}//初始化时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();}cwinwidth = currentwin.outerWidth(true); //为true的话包含margin的值
                cwinheight = currentwin.outerHeight(true);currentwin.data("positionleft", positionleft);currentwin.data("positiontop", positiontop);getBrowserDim();moveWin();//浏览器滚动条滚动时，重新移动窗口的位置var scrollTimeout;$(window).scroll(function () {//判断当前窗口是否可见if (!currentwin.is(":visible")) {return;}clearTimeout(scrollTimeout);scrollTimeout = setTimeout(function () {getBrowserDim();moveWin();}, 300);});//浏览器大小变化时，重新移动窗口的位置
                $(window).resize(function () {//判断当前窗口是否可见if (!currentwin.is(":visible")) {return;}getBrowserDim();moveWin();});currentwin.children(".title").children("img").click(function () {if (!hidefuc) {currentwin.hide("slow");} else {hidefuc();}});return currentwin;}}</script><style type="text/css">.windows{background-color:#D0DEF0;width:250px;/*padding:2px;*/margin:5px;position:absolute;display:none;}.content{height:150px;background-color:White;border:3px solid #D0DEF0;padding:5px;overflow:auto;/*控制区域内容超过指定高度和宽度时自动显示滚动条*/}.title img{width:15px;height:15px;float:right;cursor:pointer;margin:2px;}.title{padding:2px;font-size:15px;}</style>
</head>
<body><input type="button" value="左下角显示窗口" id="leftpop"/><input type="button" value="中间显示窗口" id="centerpop"/><div class="windows" id="center"><div class="title"><img alt="关闭" src="../images/close.gif" />我是中间显示窗口标题</div><div class="content">我是中间显示窗口内容</div></div><div class="windows" id="left"><div class="title"><img alt="关闭" src="../images/close.gif" />我是左边显示窗口标题</div><div class="content">我是左边显示窗口内容</div></div><div class="windows" id="right"><div class="title"><img alt="关闭" src="../images/close.gif" />我是右下角显示窗口标题</div><div class="content">我是右下角显示窗口内容</div></div>
</body>
</html>

转载于:https://www.cnblogs.com/yuzhengdong/p/3353631.html

模拟窗口效果 Jquery相关推荐

JS模拟模式窗口效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
封装一个视频组件（可模拟画中画效果）
目录前言: 1.效果: 2.效果图: 3.代码实现前言: 我是用的原生js写的这个功能,因此这个组件在vue.react.jquery等框架中均可使用,例如,我就是用在基于nuxt.js框架+ty ...
Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 很多小伙伴都来要demo源码,现在我把demo放在我的GitHub上了. https://github.com/ ...
c + Easyx 模拟闪电效果
用c + easyx模拟了闪电效果,参考了CodeBus上星羽1704 的代码,在此感谢. 实现效果图: /********************************************* ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅 ...
一个LabVIEW控件，生成模拟波形效果
LabVIEW实在强大方便,今天为各位分享一个小技巧:如何制作一款模拟波形效果小软件. 这里依托于LabVIEW内置的波形生成VI,本篇博文仅仅仅介绍基本函数发生器VI,仅仅是一个抛砖引玉,感兴趣的朋 ...
canvas三角函数模拟水波效果
原文:canvas三角函数模拟水波效果最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想 ...

模拟窗口效果 Jquery

模拟窗口效果 Jquery相关推荐

最新文章

热门文章