利用jquery實現滑出式聯系我們表單



25 98 33



特效描述:利用jquery實現 滑出式 聯系我們表單,利用jquery實現滑出式聯系我們表單

代碼結構

1. 引入CSS

<link rel="stylesheet" href="contact.css"/>

2. 引入JS

<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>

3. HTML代碼

<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>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 收縮展開 展開收縮 收縮 展開 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 文本框 text文本框 按鈕控制
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子