当前位置:首页 > 技术文章 > 正文内容

jQuery编程挑战#012:生成菜单添加和删除动画效果

arlanguage1周前 (04-26)技术文章8

定义如下HTML代码:

  • Java

  • Javascript

  • HTML

  • CSS

  • PHP

<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

对应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实现:

点击页面,在#container容器元素的起始处添加新的li元素,内容文字为“更多语言”,并且包含一个删除按钮(动画效果为向下滑动出现)

点击每一个li对应的删除图标,当前li自动从当前列表中删除(动画效果为向左滑动消失)

提交方式:

录制完整代码编写过程或者最终代码:
http://www.gbtags.com/gb/rtrecorder.htm

本帖中跟帖发布轻视频或者代码地址:
http://www.gbtags.com/gb/rtreplayerpreview/189.htm

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/4132.html

分享给朋友:

“jQuery编程挑战#012:生成菜单添加和删除动画效果” 的相关文章

Linux服务器Centos7系统Nginx安装与配置

一 安装编译工具及库文件yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel二首先要安装 PCREPCRE 作用是让 Nginx 支持 Rewrite 功能。2.1 下载 PCRE 安装包cd /usr/...

nginx命令——学习记录 nginx详细教程

nginx命令--学习记录查看80端口是否被占用netstat -ntlpnginx命令#/usr/local/nginx/sbin/nginx 启动命令#/usr/local/nginx/sbin/nginx -t 检测配置文件 #/usr/local/nginx/sbin/ngin...

Nginx安全相关配置常用教程 nginx安全策略

1. 限制请求速度设置 Nginx、Nginx Plus 的连接请求在一个真实用户请求的合理范围内。比如,如果你觉得一个正常用户每两秒可以请求一次登录页面,你就可以设置 Nginx 每两秒钟接收一个客户端 IP 的请求(大约等同于每分钟30个请求)。limit_req_zone $binary_re...

提升网站性能开发的10个技巧 提升网站性能开发的10个技巧是什么

随着网络的高速发展,网络性能的持续提高成为能否在芸芸App中脱颖而出的关键。高度联结的世界意味着用户对网络体验提出了更严苛的要求。假如你的网站不能做到快速响应,又或你的App存在延迟,用户很快就会移情你的竞争对手。以下为大家总结10条有关性能提升的经验,以供参考:1. 采用反向代理服务器(Rever...

php手把手教你做网站(二十四)jquery ajax上传大的附件

上传大的附件分为两种情况,可以改变服务器配置;不能改变配置;第2种使用分片上传优势:可以突破服务器上传大小的限制,可以web存储上传到哪一块了,在浏览器关闭或者刷新的情况下可以断点续传;劣势:上传速度慢,在我本地电脑测试,200M的文件,改变配置按照正常方式上传大约需要12到15秒,但是使用第2种分...

nginx入门——nginx访问日志(六)

日志功能在ngx_http_log_module模块中定义,实现了以指定格式写入请求日志。我们先来看一个nginx配置文件:http { include mime.types; default_type application/octet-stream;...