JQuery实现小窗口的淡入淡出

hoocy · 发表于 2013-2-7 21:21:26

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"       "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>JqueryWindow</title>    <script type="text/javascript" src="jslib/jquerywin.js"></script>    <script type="text/javascript" src="jslib/jquery.js"></script>    <link type="text/css" rel="stylesheet" href="css/win.css"></head><body>    <a href="#"  >点这里</a>    <div id="win">          <div id="title">                   <span id="close" >X</span>          </div>          <div id="context">欢迎您，hoocy</div>    </div></body></html>

win.css

#win { /*希望窗口有边框*/ border: 1px red solid; /*希望窗口宽度和高度固定，不要太大*/ width: 300px; height: 200px; /*希望控制窗口的位置*/ position: absolute;  /*绝对定位*/ top: 100px; left: 350px; /*希望窗口开始时不可见*/ display:none;}#content{ padding-left:3px; padding-top:5px;}#title{ background-color:blue; color:yellow; padding-left:3px;}#close{ margin-left:280px; cursor:pointer;}
jquerywin.js

function showwin(){ var winNode =$("#win"); //winNode.show("slow"); winNode.fadeIn("slow"); }function hide(){       var winNode =$("#win"); // winNode.hide("slow");    winNode.fadeOut("slow"); }function out(){       var winNode =$("#win"); // winNode.hide("slow");    winNode.fadeIn("slow"); }

再加入 jquery.js即可

		自动登录	找回密码
密码			立即注册