WIN 7透明弹窗效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 WIN 7透明弹窗效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(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" xml:lang="de" lang="de">
  <head>
    <title>jQuery WIN 7透明弹窗效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="css/chinaz.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.4.4.js"></script>   
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>        
    <script type="text/javascript" src="js/jquery-chinaz.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //$('#Window1').chinaz({
//          WindowTitle:          'Window 1 - Happy OutBounce',
//          WindowPositionTop:    100,
//          WindowPositionLeft:   200,
//          WindowWidth:          300,
//          WindowHeight:         200,
//          WindowAnimation:      'easeOutBounce'        
//        });  		
        $('#Firefoxicon').click(function() {
          $('#Window1').chinaz({
            WindowTitle:          'FireFox',
            WindowPositionTop:    'center',
            WindowPositionLeft:   'center',
            WindowWidth:          700,
            WindowHeight:         500,
            WindowAnimation:      'easeOutCubic'
          });
        });		
      });
    </script>
    <style>
      body {
        background: #fc6;
      }     
	  #Window1{display:none;}
    </style>
  </head>
  <body>

<div id="Firefoxicon">
<center><h1>点击我</h1></center>
</div>

    <div id="Window1">
      <p>
        My Window Animation Style is <strong>OutBounce</strong>
      </p>
      <ul>
        <li>Dobbleclick me! And see my <strong>happy Animation</strong>
        <li>Resize me! Press my Buttons try my Look and Feel
        <li>Drag me (header) and see my <strong>Live Aero Glass Header</strong>
      </ul>
    </div>
  </body>  
</html>

JS代码(jquery-chinaz.js):

/* * chinaz - jQuery Plugin (v3.51) * Copyright 2010,Christian Goldbach * Dual licensed under the MIT or GPL Version 2 licenses. * * Project Website:* http://www.soyos.net/chinaz-jquery.html * http://www.soyos.net * * * * Requires Easing Plugin for Window Animations:* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * * Changelog:* ~~~~~~~~~~ * Version 3.51 (2010-06-09) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * Added more config options:* New Feature:Window get the focus by clicking window buttons * Bugfix:Resizing to regular Size * * Version 3.5 (2010-06-09) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * Added more config options:* - WindowAnimationSpeed * * Bugfix:iFrames can now change the size correctly * Bugfix:The buttons now look clean,in all configurations * Bugfix:window without Maximize button can not be maximized by double-clicking on the header * Bugfix:When clicking on the buttons appear no more # in the Browser URL * Bugfix:Dragging is not longer possible by the content area. Only by Header. * Bugfix:The content can now be scrolled * Bugfix:Fixed IE JavaScript crashes * * Version 2.0 (2010-06-01) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * Added more config options:* - WindowResizable:* - WindowMaximize * - WindowMinimize * - WindowClosable * - WindowDraggable * * Date:2010-06-01 */
(function($){
	$.fn.extend({
	//plugin name - Aero Window (like Windows7 Style) chinaz:function(options){
	//Identify clearly this window ---------------------------------------- WindowID = $(this).attr('id');
	if (($('body').data(WindowID)) == null){
	var $WindowAllwaysRegistered = false;
	//Register this Window $('body').data( WindowID,1);
}
else{
	//Window exists var $WindowAllwaysRegistered = true;
}
//If the window is registered,just show it and set focus --------------- if ($WindowAllwaysRegistered == true){
	Window = $(this).find(".chinaz");
	$(this).find(".chinaz").css('display','block');
	$(".chinaz").removeClass('active');
	if (Window.hasClass('chinaz')) Window.addClass('active');
	if (($('body').data('chinazMaxZIndex')) == null){
	$('body').data( 'chinazMaxZIndex',Window.css('z-index'));
}
i = $('body').data('chinazMaxZIndex');
	i++;
	Window.css('z-index',i);
	$('body').data( 'chinazMaxZIndex',Window.css('z-index'));
	return;
}
//Settings Window and the default values--------------------------------- var defaults ={
	WindowTitle:null,WindowPositionTop:60,/* Posible are pixels or 'center' */
 WindowPositionLeft:10,/* Posible are pixels or 'center' */
 WindowWidth:300,/* Only pixels */
 WindowHeight:300,/* Only pixels */
 WindowMinWidth:250,/* Only pixels */
 WindowMinHeight:0,/* Only pixels */
 WindowResizable:true,/* true,false*/
 WindowMaximize:true,/* true,false*/
 WindowMinimize:true,/* true,false*/
 WindowClosable:true,/* true,false*/
 WindowDraggable:true,/* true,false*/
 WindowStatus:'regular',/* 'regular','maximized','minimized' */
 WindowAnimationSpeed:500,WindowAnimation:'easeOutElastic'}
;
	/*----------------------------------------------------------------------- Posible WindowAnimation:- easeInQuad - easeOutQuad - easeInOutQuad - easeInCubic - easeOutCubic - easeInOutCubic - easeInQuart - easeOutQuart - easeInOutQuart - easeInQuint - easeOutQuint - easeInOutQuint - easeInSine - easeOutSine - easeInOutSine - easeInExpo - easeOutExpo - easeInOutExpo - easeInCirc - easeOutCirc - easeInOutCirc - easeInElastic - easeOutElastic - easeInOutElastic - easeInBack - easeOutBack - easeInOutBack - easeInBounce - easeOutBounce - easeInOutBounce -----------------------------------------------------------------------*/
 //Assign current element to variable,in this case is UL element var options = $.extend(defaults,options);
	return this.each(function(){
	var o =options;
	//Generate the new Window --------------------------------------------- var WindowContent = $(this).html();
	//BTN --- if (o.WindowMinimize){
	if (o.WindowMaximize || o.WindowClosable){
	var WinMinBtn = '<a href="#" class="win-min-btn"></a><div class="win-btn-spacer"></div>';
}
else{
	var WinMinBtn = '<a href="#" class="win-min-btn"></a>';
}
}
else{
	var WinMinBtn = '';
}
//BTN --- if (o.WindowMaximize){
	if (o.WindowClosable){
	var WinMaxBtn = '<div class="WinBtnSet winmax"><a href="#" class="win-max-btn"></a><div class="win-btn-spacer"></div></div>';
	var WinRegBtn = '<div class="WinBtnSet winreg"><a href="#" class="win-reg-btn"></a><div class="win-btn-spacer"></div></div>';
}
else{
	var WinMaxBtn = '<div class="WinBtnSet winmax"><a href="#" class="win-max-btn"></a></div>';
	var WinRegBtn = '<div class="WinBtnSet winreg"><a href="#" class="win-reg-btn"></a></div>';
}
}
else{
	var WinMaxBtn = '';
	var WinRegBtn = '';
}
//BTN --- if (o.WindowClosable){
	var WinCloseBtn = '<a href="#" class="win-close-btn"></a>';
}
else{
	var WinCloseBtn = '';
}
if (o.WindowMinimize || o.WindowMaximize || o.WindowClosable){
	var WinBtnLeftedge = '<div class="win-btn-leftedge"></div>';
	var WinBtnRightedge = '<div class="win-btn-rightedge"></div>';
}
else{
	var WinBtnLeftedge = '';
	var WinBtnRightedge = '';
}
$(this).html( '<div class="chinaz">' + ' <table cellpadding="0" cellspacing="0" border="0">' + ' <tr>' + ' <td class="table-tl"></td>' + ' <td class="table-tm"></td>' + ' <td class="table-tr"></td>' + ' </tr>' + ' <tr>' + ' <td class="table-lm"></td>' + ' <td class="table-mm" align="right">' + ' <div class="title"><nobr>'+o.WindowTitle+'</nobr></div>' + ' <div class="buttons">' + WinBtnLeftedge + WinMinBtn + WinMaxBtn + WinRegBtn + WinCloseBtn + WinBtnRightedge + ' </div>' + ' <div class="table-mm-container" align="left">' + ' <div class="table-mm-content" style="width:'+o.WindowWidth+'px;
	height:'+o.WindowHeight+'px;
	">' + WindowContent + ' </div>' + ' </div>' + ' </td>' + ' <td class="table-rm"></td>' + ' </tr>' + ' <tr>' + ' <td class="table-bl"></td>' + ' <td class="table-bm"></td>' + ' <td class="table-br"></td>' + ' </tr>' + ' </table>'+ '</div>' );
	//Display hidden Containers ------------------------------------------- $(this).css('display','block');
	//Window Objects ------------------------------------------------------ var Window = $(this).find(".chinaz");
	var WindowContainer = $(this).find(".table-mm-container");
	var WindowContent = $(this).find(".table-mm-content");
	var BTNMin = $(this).find(".win-min-btn");
	var BTNMax = $(this).find(".WinBtnSet.winmax");
	var BTNReg = $(this).find(".WinBtnSet.winreg");
	var BTNClose = $(this).find(".win-close-btn");
	//Initial Configuration ----------------------------------------------- BTNReg.css('display','none');
	FocusWindow(Window);
	//Set Window Position if(o.WindowPositionTop == 'center'){
	o.WindowPositionTop = ($(window).height()/2) - o.WindowHeight/2 - 37;
}
if(o.WindowPositionLeft == 'center'){
	o.WindowPositionLeft = ($(window).width()/2) - o.WindowWidth/2 - 17;
}
switch (o.WindowStatus){
	case 'regular':RegularWindow();
	break;
	case 'maximized':MaximizeWindow();
	break;
	case 'minimized':MinimizeWindow();
	break;
	default:break;
}
//Window Functions ---------------------------------------------------- function MaximizeWindow(){
	WindowContainer.css('visibility','visible');
	BTNMax.css('display','none');
	BTNReg.css('display','block');
	WindowContent.animate({
	width:$(window).width()-32,height:$(window).height()-77}
,{
	queue:false,duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	//Set new Window Position Window.animate({
	width:$(window).width(),height:$(window).height(),top:0,left:0}
,{
	duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	o.WindowStatus = 'maximized';
	return(false);
}
function MinimizeWindow(){
	BTNReg.css('display','block');
	BTNMax.css('display','none');
	WindowContainer.css('visibility','hidden');
	WindowContent.animate({
	width:o.WindowMinWidth,height:o.WindowMinHeight}
,{
	queue:true,duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	//Set new Window Position Window.animate({
	width:o.WindowMinWidth+32,height:o.WindowMinHeight+72,top:$(window).height()-77,left:0}
,{
	duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	o.WindowStatus = 'minimized';
	return(false);
}
function RegularWindow(){
	BTNMax.css('display','block');
	BTNReg.css('display','none');
	WindowContainer.css('visibility','visible');
	WindowContent.animate({
	width:o.WindowWidth,height:o.WindowHeight}
,{
	queue:false,duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	Window.animate({
	width:o.WindowWidth+32,height:o.WindowHeight+72}
,{
	queue:false,duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	//Set new Window Position //Error handling,if the left position is negative. if ((typeof(o.WindowPositionLeft) == 'string') && (o.WindowPositionLeft.substring(0,1) == '-')) o.WindowPositionLeft = 0;
	Window.animate({
	top:o.WindowPositionTop,left:o.WindowPositionLeft}
,{
	duration:o.WindowAnimationSpeed,easing:o.WindowAnimation}
);
	o.WindowStatus = 'regular';
	return(false);
}
function FocusWindow(Window){
	$(".chinaz").removeClass('active');
	if (Window.hasClass('chinaz')) Window.addClass('active');
	if (($('body').data('chinazMaxZIndex')) == null){
	$('body').data( 'chinazMaxZIndex',Window.css('z-index'));
}
i = $('body').data('chinazMaxZIndex');
	i++;
	Window.css('z-index',i);
	$('body').data( 'chinazMaxZIndex',Window.css('z-index'));
}
//Attach user events to the Window ------------------------------------ if (o.WindowMaximize){
	$(this).dblclick(function(){
	switch (o.WindowStatus){
	case 'regular':MaximizeWindow();
	break;
	case 'maximized':RegularWindow();
	break;
	case 'minimized':RegularWindow();
	break;
	default:break;
}
}
);
}
else{
	$(this).dblclick(function(){
	switch (o.WindowStatus){
	case 'maximized':RegularWindow();
	break;
	case 'minimized':RegularWindow();
	break;
	default:break;
}
}
);
}
//User Interaction - Minimize Button BTNMin.click(function (){
	FocusWindow(Window);
	MinimizeWindow();
	return false;
}
);
	//User Interaction - Maximize Button BTNMax.click(function (){
	FocusWindow(Window);
	MaximizeWindow();
	return false;
}
);
	//User Interaction - Regular Button BTNReg.click(function (){
	FocusWindow(Window);
	RegularWindow();
	return false;
}
);
	//Close Button BTNClose.click(function (){
	//Unregister this Window Window.css('display','none');
	return(false);
}
);
	//Support Dragging ---------------------------------------------------- if (o.WindowDraggable){
	Window.draggable({
	distance:3,cancel:".table-mm-content",start:function(){
	FocusWindow(Window);
	$(".chinaz").find('#iframeHelper').css({
	'display':'block'}
);
	$(".chinaz").removeClass('active');
	$(this).addClass('active');
	$('body').data( 'chinazMaxZIndex',$(this).css('z-index'));
}
,drag:function(){
	WindowTop = -1*$(this).offset().top;
	WindowLeft = -1*$(this).offset().left;
	$(this).css({
	backgroundPosition:WindowLeft+ 'px ' +WindowTop+ 'px'}
);
}
,stop:function(){
	//alert(Window.css('top'));
	o.WindowPositionTop = Window.css('top');
	o.WindowPositionLeft = Window.css('left');
	$(".chinaz").find('#iframeHelper').css({
	'display':'none'}
);
}
}
);
}
//Support Focus on Window by Click ------------------------------------ Window.click(function (){
	FocusWindow(Window);
}
);
	//Support Window Resizing --------------------------------------------- if (o.WindowResizable){
	Window.resizable({
	minHeight:o.WindowMinHeight+72,minWidth:o.WindowMinWidth,alsoResize:WindowContent,start:function(){
	WindowContainer.css('visibility','visible');
	$(".chinaz").find('#iframeHelper').css({
	'display':'block'}
);
	$(".chinaz").removeClass('active');
	Window.addClass('active');
	if (($('body').data('chinazMaxZIndex')) == null){
	$('body').data( 'chinazMaxZIndex',Window.css('z-index'));
}
i = $('body').data('chinazMaxZIndex');
	i++;
	Window.css('z-index',i);
	$('body').data( 'chinazMaxZIndex',Window.css('z-index'));
}
,stop:function(){
	o.WindowWidth = WindowContent.width();
	o.WindowHeight = WindowContent.height();
	$(".chinaz").find('#iframeHelper').css({
	'display':'none'}
);
}
}
);
}
}
);
}
}
);
}
)(jQuery);

JS代码(jquery.easing.1.3.js):

/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.extend( jQuery.easing,{
	def:'easeOutQuad',swing:function (x,t,b,c,d){
	//alert(jQuery.easing.default);
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
	return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
	return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
	return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
	return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
	return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
	return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
	return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d/2)==2) return b+c;
	if (!p) p=d*(.3*1.5);
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
	if ((t/=d) < (1/2.75)){
	return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
	if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
	/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */

CSS代码(chinaz.css):

.chinaz{position:absolute;background:url(../images/lines.png);background-position:0px -100px;z-index:10;overflow:hidden;display:block;}
.chinaz .table-tl{background:url(../images/tl.png);min-width:9px;height:9px;}
.chinaz .table-tm{background:url(../images/tm.png);}
.chinaz .table-tr{background:url(../images/tr.png);min-width:9px;height:9px;}
.chinaz .table-rm{background:url(../images/rm.png);}
.chinaz .table-bl{background:url(../images/bl.png);width:9px;height:9px;}
.chinaz .table-bm{background:url(../images/bm.png);}
.chinaz .table-br{background:url(../images/br.png);width:9px;height:9px;}
.chinaz .table-lm{background:url(../images/lm.png);}
.chinaz .table-mm{background:url(../images/mm.png);}
/*-------------------------------chinaz Style - Active----------------------------*/
.chinaz.active{position:absolute;background:url(../images/lines.png) 0px -400px;z-index:100;}
.chinaz.active .table-tl{background:url(../images/tl.png);width:9px;height:9px;}
.chinaz.active .table-tm{background:url(../images/tm.png);}
.chinaz.active .table-tr{background:url(../images/tr.png);width:9px;height:9px;}
.chinaz.active .table-rm{background:url(../images/rm.png);}
.chinaz.active .table-bl{background:url(../images/bl.png);width:9px;height:9px;}
.chinaz.active .table-bm{background:url(../images/bm.png);}
.chinaz.active .table-br{background:url(../images/br.png);width:9px;height:9px;}
.chinaz.active .table-lm{background:url(../images/lm.png);}
.chinaz.active .table-mm{background:url(../images/mm.png);}
.chinaz .table-mm-container{margin-top:40px;border:1px solid #b0c6e4;}
.chinaz .table-mm-content{font-family:arial;padding:5px;border:1px solid #000;background-color:#fff;overflow:auto;}
.chinaz .title{position:absolute;margin:10px 0px 0px 5px;text-shadow:#fff 0px 0px 5px;color:#333;font-family:arial;padding-right:5px;font-size:14px;left:5px;cursor:default;}
/*-------------------------------Button Area----------------------------*/
.buttons{position:relative;float:right;top:-6px;}
.buttons a{text-decoration:none;cursor:default;}
/*---------------------------Buttons Regular Window--------------------------*/
.chinaz .buttons .win-min-btn{width:27px;height:19px;display:block;float:left;background:url(../images/btn-min1.png);}
.chinaz .buttons .win-max-btn{width:26px;height:19px;display:block;float:left;background:url(../images/btn-max1.png);}
.chinaz .buttons .win-reg-btn{width:26px;height:19px;display:block;float:left;background:url(../images/btn-reg1.png);}
.chinaz .buttons .win-close-btn{width:46px;height:19px;float:left;display:block;background:url(../images/btn-close1.png);}
.chinaz .buttons .win-btn-leftedge{width:2px;height:19px;float:left;background:url(../images/left.png);}
.chinaz .buttons .win-btn-rightedge{width:2px;height:19px;float:left;background:url(../images/right.png);}
.chinaz .buttons .win-btn-spacer{width:1px;height:19px;float:left;background:url(../images/spacer.png);}
.chinaz .buttons .WinBtnSet{float:left;}
/*---------------------------Buttons Active Window---------------------------*/
.chinaz.active .buttons .win-min-btn{background:url(../images/btn-min1.png);}
.chinaz.active .buttons .win-max-btn{background:url(../images/btn-max1.png);}
.chinaz.active .buttons .win-reg-btn{background:url(../images/btn-reg1.png);}
.chinaz.active .buttons .win-close-btn{background:url(../images/btn-close1.png);}
/*----------------------------Buttons Hover Effects-------------------------*/
.chinaz .buttons .win-min-btn:hover{background:url(../images/btn-min.png);}
.chinaz .buttons .win-max-btn:hover{background:url(../images/btn-max.png);}
.chinaz .buttons .win-reg-btn:hover{background:url(../images/btn-reg.png);}
.chinaz .buttons .win-close-btn:hover{background:url(../images/btn-close.png);}

附件:下载该文件资源,减少时间成本(增值服务)