zoukankan      html  css  js  c++  java
  • 【FIR.im赞助】jQuery编程挑战#012:生成菜单添加和删除动画效果

     
    申请达人,去除赞助商链接

    定义如下HTML代码:

    1. <!-- HTML代码片段中请勿添加<body>标签 //-->
    2. <ul id="container">
    3. <li>Java<i class="fa fa-times pull-right"></i></li>
    4. <li>Javascript<i class="fa fa-times pull-right"></i></li>
    5. <li>HTML<i class="fa fa-times pull-right"></i></li>
    6. <li>CSS<i class="fa fa-times pull-right"></i></li>
    7. <li>PHP<i class="fa fa-times pull-right"></i></li>
    8. </ul>
    9.  
    10. <!-- 推荐开源CDN来选取需引用的外部JS //-->
    11. <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
     
     

    对应CSS如下:

    1. /*CSS源代码*/
    2. @import url('//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');
    3.  
    4. body{
    5. background:#666;
    6. color: #fff;
    7. font-family: 'microsoft yahei',Arial,sans-serif;
    8. }
    9.  
    10. ul{
    11. list-style:none;
    12. margin: 0;
    13. padding: 0;
    14. position: relative;
    15. }
    16.  
    17. li{
    18. padding: 10px;
    19. margin: 2px;
    20. border: 1px solid #888;
    21. }

    挑战要求

    请使用jQuery实现:

    1. 点击页面,在#container容器元素的起始处添加新的li元素,内容文字为“更多语言”,并且包含一个删除按钮(动画效果为向下滑动出现)
    2. 点击每一个li对应的删除图标,当前li自动从当前列表中删除(动画效果为向左滑动消失)

    提交方式:

    礼品赞助

    本期挑战礼品5份(超厚卫衣或者16GU盘)由 FIR.im 鼎力赞助!

    FIR.im 专注开发测试效率提升,为开发者提供 App 测试托管分发、实时崩溃分析等产品与服务http://fir.im/

    礼品一:卫衣

    礼品二:U盘

    如何增加获奖机率?

    • 最快完成奖一名: 最快保存递交代码
    • 最佳讲解奖一名: 代码录制过程及其气泡讲解详细认真
    • 最佳人气奖一名: 点赞(点+)的人最多
    • 参与及其优胜奖两名
  • 相关阅读:
    WinDbg符号表设置的基础
    Mysql的用户管理与授权
    Django的models由数据库表生成
    Spring框架第一天(搭建项目)
    Python中的参数
    Java集合
    Mysql的锁
    # django通过操作admin对原有的数据库进行操作
    数据库连接池与SQL工具类
    MySql的事务及数据的导入导出
  • 原文地址:https://www.cnblogs.com/gbtags/p/4382881.html
Copyright © 2011-2022 走看看