jquery滑出式联系我们表单js代码

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

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

以下是 jquery滑出式联系我们表单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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery滑出式联系我们表单</title>
<link rel="stylesheet" href="contact.css"/>
<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="contact.js" type="text/javascript"></script>
</head>

<body>
<div>
<div id="contactArea">
  <form>
    <div id="info">
      <label for="author">Name</label>
      <input type="text" name="author" id="author" value="" size="22" tabindex="1" class="rounded" aria-required='true' />
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="" size="22" tabindex="2" class="rounded" aria-required='true' />
      <label for="url">Website</label>
      <input type="text" name="url" id="url" value="" size="22" tabindex="3" class="rounded" />
    </div>
    <div id="message">
      <label for="comment">Your Message</label>
      <textarea name="comment" id="comment" cols="2" rows="2" tabindex="4" class="rounded"></textarea>
      <input name="submit" type="submit" id="submit" class="rounded" tabindex="5" value="Submit" />
    </div>
  </form>
</div>
<div id="container">
  <div id="header" class="container"></div>
  <a class="contact" href="#">Contact Us</a> </div>
<div class="content">
  <h1>Contact Us Slide-Out Area using jQuery</h1>
  <p>Click the contact us button above</p>
</div>
</div>
</body>
</html>

JS代码(contact.js):

$(document).ready(function(){
	$("#contactArea").css('height','0px');
	$("a.contact").toggle(function (){
	$("#contactArea").animate({
	height:"225px"}
,{
	queue:false,duration:1700,easing:'easeOutBounce'}
)}
,function (){
	$("#contactArea").animate({
	height:"0px"}
,{
	queue:false,duration:1700,easing:'easeOutBounce'}
)}
);
}
);

CSS代码(contact.css):

#contactArea{height:225px;border-bottom:5px solid #02b6f1;overflow:hidden;background-color:#02b6f1;}
/* ----- The Pretty Stuff ----- */
*{margin:0;padding:0;outline:0;}
body{background-color:#2f3135;}
#container{width:960px;margin:0 auto;}
.content{width:850px;height:300px;padding:55px;margin:0 auto;background-color:#fff;-webkit-border-radius:10px;-moz-border-radius:10px;font-family:Arial;font-size:16px;line-height:25px;position:relative;top:45px;}
h1{background:url(title.gif) no-repeat center center;display:block;width:604px;height:36px;margin:0 auto;text-indent:-9999px;}
p{text-align:center;letter-spacing:2px;color:#2f3135;}
h1,p{position:relative;top:110px;}
a.contact{float:right;height:34px;width:115px;display:block;text-indent:-9999px;background:url(contactUs.gif) no-repeat 0 0;}
form{width:910px;height:300px;padding:25px;margin:0 auto;}
#info{float:left;width:350px;}
#message{float:right;width:500px;}
input{margin-bottom:15px;padding:7px 7px;color:#4A4A4A;float:right;}
label{margin-bottom:5px;float:left;clear:both;position:relative;top:10px;}
textarea{padding:7px 7px;height:110px;margin-bottom:15px;color:#4A4A4A;line-height:20px;font-size:12px;float:right;}
input{width:250px;}
textarea{width:350px;}
label{font-family:Arial;font-size:16px;color:#fff;}
input#submit{float:right;clear:both;cursor:pointer;width:125px;padding:7px 7px;background-color:#972324;border:0;color:#fff;}
input,textarea{outline:none;background-color:#f1f1f1;border:3px solid #b2b2b2;padding:7px;}
input:focus,textarea:focus{border:3px solid #972324;}
input,textarea{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
#footer{width:930px;padding:15px;margin:0 auto;position:relative;top:55px;}
#footer img{float:right;}
#footer a{color:#FFFFFF;}
#footer a.back{color:#02b6f1;text-decoration:none;font-family:Arial;font-size:16px;position:relative;top:10px;}

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