我爱撸码，撸码使我感到快乐！
大家好，我是Counter。下面给大家介绍利用jQuery实现的小动画，非常的简便，如果有原生js操作的话，那么就不止这么多行了。至于CSS，个人觉得，这边CSS布局也蛮重要的，所以有一些也加上了注释，主要为jQuery的注释，本节用到了jQuery的链式调用，以及事件委托代理，以及标签的动态生成。欢迎一起技术探讨，一起成长。
实现的效果: 当你点击屏幕出现的个人头像或者名字，都会缓慢向下出现个人简介，并且当你再次点击时个人简介收回去。当你点击上方的 + 时可以创建属于你自己的个人名片，并且是一定要输入名字和简介的否则不会生成名片，至于头像，可以通过网络上免费的头像来填入图像的url，好了，话不多说，上效果:

代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<!-- CSS样式 -->
<style>
/* 最完成div居中 */
.wrapper {
position: absolute;
left: 50%;
margin-left: -150px
}
.item {
width: 300px;
padding: 20px 0;
margin-top: 10px;
background-color: #bbb;
color: #fff;
border-radius: 20px;
cursor: pointer;
}
.item .img {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 20px;
border-radius: 50%;
/* 使图片居中 */
vertical-align: middle;
overflow: hidden;
}
.img img {
width: 100%;
height: 100%
}
.item h3 {
display: inline-block;
margin-left: 20px;
}
.item p {
display: none;
margin: 20px;
/* 使长单词也能够换行 */
word-wrap: break-word;
}
/* 弹层充满第一屏 */
.hide {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.alert {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin-left: -145px;
/* Y轴方向向上移动自身高度的一半 */
transform: translateY(-50%);
width: 250px;
padding: 20px;
border-radius: 20px;
background-color: #fff;
text-align: center;
/* 弹层位于所有基本元素上面 */
z-index: 1000;
}
.alert input {
width: 200px;
height: 30px;
margin: 20px 0;
border: none;
border-bottom: 1px solid #888;
outline: none;
color: #FF6700
}
.alert .ok {
width: 50px;
height: 50px;
margin-left: 100px;
border-radius: 50%;
background-color: #000;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.add {
width: 50px;
height: 50px;
margin: 0 auto;
text-align: center;
line-height: 50px;
background-color: #ccc;
color: #fff;
font-size: 20px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="add">+</div>
<div class="wrapper">
<div class="item">
<div class="img">
<img src="http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg" alt="">
</div>
<h3>Counter</h3>
<p>Counter爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码。</p>
</div>
</div>
<!-- jQuery，已经引入在线载入，这边注释了 -->
<!-- <script src="../jquery-3.3.1.js"></script> -->
<script>
// 事件委托代理，如果绑定在现有dom基础上，那么将印象后面通过jQuery生成的dom，导致后面用户自己生成的名片点击不会出现和隐藏
$('body').on('click', '.item', function () {
$(this).find('p').slideToggle();
// 链式调用。// 事件委托代理，因为这边的弹层是用户点击添加时才加入到html当中，所有这边需要使用到事件代理，否则的话绑定在后来添加上的dom中不生效
}).on('click', '.ok', function () {
// 获取用户输入的值，然后插入到wrapper类名的元素中
var name = $('.yourName').val();
var img = $('.image-url').val();
var card = $('.yourCard').val();
// 判读如果用户输入的名字与简介不为空的话就创建用户名片
if (name != "" && card != "") {
var str = '<div class="item">\
<div class="img">\
<img src=" ' + img + ' " alt="">\
</div>\
<h3> ' + name + '</h3>\
<p>' + card + '</p>\
</div>'
$('.wrapper').append(str);
$('.hide').add('.alert').fadeOut();
// 退出后将输入框都设为空
$('.yourName').add('.image-url').add('.yourCard').val('');
}
// 否则弹窗提示用户
else {
$('.hide').add('.alert').fadeOut();
setTimeout(function () {
alert('请输入名字与简介！');
},500);
}
})
// 只点击一次触发，所以绑定one，没有必要每次点击，每次都生成一个弹层
$('.add').one('click', function () {
var str = '<div class="hide"></div>\
<div class="alert">\
<input class="yourName" type="text" placeholder="你的名字">\
<input class="image-url" type="text" placeholder="头像url">\
<input class="yourCard" type="text" placeholder="你的简介">\
<div class="ok">ok</div>\
</div>'
$('body').append(str);
// 链式调用。//每次点击弹层都是需要缓慢出现的
}).on('click', function () {
$('.hide').add('.alert').fadeIn();
})
</script>
</body>
</html>

利用jQuery实现用户名片小动画的更多相关文章

  1. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  3. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  4. jquery实现一些小动画一

    jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...

  6. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  7. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

  8. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  9. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

随机推荐

  1. 1.3 flask

    2019-1-3 12:03:55 还是天天看视频,敲代码感觉好! 越努力,越幸运! flask 部分参考连接  https://www.cnblogs.com/wupeiqi/articles/75 ...

  2. arch 相关软件及脚本

    安装 arch 脚本 sudo pacman -S arch-install-scripts 安装 ssh  并开启服务 sudo pacman -S open-ssh vim /etc/ssh/ss ...

  3. ThreadPool study

    线程池浅析 线程池顾名思义就是放线程的池子 Thread Pool. 那么为什么要有线程池呢?有些时候系统需要处理非常多的执行时间很短的请求,如果每一个请求都开启一个新的线程,则系统创建销毁线程的开销 ...

  4. Ｃ++11 std::call_once：保证函数在任何情况下只调用一次

    std::call_once的作用是很简单的, 就是保证函数或者一些代码段在并发或者多线程的情况下,始终只会被执行一次.比如一些init函数,多次调用可能导致各种奇怪问题. 给个例子: #includ ...

  5. qemu对虚拟机的内存管理（一）

    在分析了KVM中对虚拟机各级地址(gva->gpa->hva->hpa)的转换之后,想要知道qemu中又是如何完成各级地址转换的,因此对qemu中对虚拟机内存管理的相关数据结构与源码 ...

  6. zabbix3.2使用自带模板监控MySql

    一.zabbix自带MySql模板监控项 Zabbix3.0之后已经有MySql监控模板了,所以我们只要引用ZabbixServer自带的模板即可.zabbix默认有14个监控项 我们只需获取监控项需 ...

  7. cds view 创建和调用

    cds view 是一个core data service, 能够将数据库表虚拟化为一个虚拟表(double).因为各个使用sap的公司,使用的数据库数据是不同的,所以提供一个数据库的虚拟.  通过向 ...

  8. 文件上传下下载（不包含断点续传） Excel，Word导入导出基础

    1.文件上传下载(MVC应用) 视图:form表单,编码方式为multipart/form-data <body> <div> <form action="/D ...

  9. C#设计模式(12)——享元模式（Flyweight Pattern）（转）

    一.引言 在软件开发过程,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次地去申请内存空间了,这样可能会出现内存使用越来越多的情况,这样的问题是非 ...

  10. form提交所有数据

    HTML: <div class="panel"> <div class="panel-body"> <h3>完善简历< ...