【FIR.im贊助】jQuery編程挑戰#012：生成菜單添加和刪除動畫效果

時間 2019-11-11

標籤 FIR.im贊助 jquery 編程挑戰生成菜單添加刪除動畫效果欄目 JQuery 简体版

原文原文鏈接

申請達人，去除贊助商連接

定義以下HTML代碼：javascript

<ul id="container">
<li>Java<i class="fa fa-times pull-right"></i></li>
<li>Javascript<i class="fa fa-times pull-right"></i></li>
<li>HTML<i class="fa fa-times pull-right"></i></li>
<li>CSS<i class="fa fa-times pull-right"></i></li>
<li>PHP<i class="fa fa-times pull-right"></i></li>
</ul>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

對應CSS以下：css

/*CSS源代碼*/
@import url('//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');
body{
background:#666;
color: #fff;
font-family: 'microsoft yahei',Arial,sans-serif;
}
ul{
list-style:none;
margin: 0;
padding: 0;
position: relative;
}
li{
padding: 10px;
margin: 2px;
border: 1px solid #888;
}

挑戰要求

請使用jQuery實現：java

點擊頁面，在#container容器元素的起始處添加新的li元素，內容文字爲「更多語言」，而且包含一個刪除按鈕（動畫效果爲向下滑動出現）
點擊每個li對應的刪除圖標，當前li自動從當前列表中刪除（動畫效果爲向左滑動消失）

提交方式：

錄製完整代碼編寫過程或者最終代碼：http://www.gbtags.com/gb/rtrecorder.htm
本帖中跟帖發佈輕視頻或者代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/189.ht m
【強烈建議】馬上加入課程QQ羣：157757552，快速通知獲獎用戶及遞交快遞聯繫方式
【強烈建議】我的信息中添加「QQ」號碼，方便咱們快速聯繫獲獎的你

禮品贊助

本期挑戰禮品5份（超厚衛衣或者16GU盤）由 FIR.im 鼎力贊助！jquery

FIR.im 專一開發測試效率提高，爲開發者提供 App 測試託管分發、實時崩潰分析等產品與服務http://fir.im/swift

禮品一：衛衣app

禮品二：U盤jsp

如何增長獲獎機率？

最快完成獎一名：最快保存遞交代碼
最佳講解獎一名：代碼錄製過程及其氣泡講解詳細認真
最佳人氣獎一名：點贊（點+）的人最多
參與及其優勝獎兩名

相關文章

相關標籤/搜索

jQuery Mobile 教程

XLink 和 XPointer 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<