我爱撸码，撸码使我感到快乐！
大家好，我是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. 四、XML语言学习（1）

    XML语言 1.XML是什么?XML是指可扩展标记语言XML是指可扩展标记语言(eXtensible Markup Language),它是一种标记语言,很类似HTML.它被设计的宗旨是传输数据,而非 ...

  2. vue2.0 源码解读(一)

    又看完一遍中文社区的教程接下来开始做vue2.0的源码解读了! 注:解读源码时一定要配合vue2.0的生命周期和API文档一起看 vue2.0的生命周期分为4主要个过程 create. 创建---实例 ...

  3. leetcode-Evaluate the value of an arithmetic expression in Reverse Polish Notation

    leetcode 逆波兰式求解 Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid ope ...

  4. ArcPy中mapping常见函数及用法1

    arcpy的mapping模块常见属性方法总结1.如何获取当前地图文档: 方式:mxd = mapping.MapDocument("CURRTENT")引用本地或者网络文档(ar ...

  5. day20 二十、加密模块、操作配置文件、操作shell命令、xml模块

    一.加密模块 1.hashlib模块:加密 ①有解密的加密方式 ②无解密的加密方式:碰撞检查 -- 1)不同数据加密后的结果一定不一致 -- 2)相同数据的加密结果一定是一致的 import hash ...

  6. day12 十二、开放封闭、装饰器

    一.nonlocal关键词 # global # num = # def fn(): # global num # L>G 将局部的名字与全局统一 # num = # fn() # print( ...

  7. django-CRM-项目部署

    流程 rbac组件的应用 1:拷贝rbac组件到新的项目中,执行注册 2:数据库迁移 先删除rbac下migrations下除了init之外的所有文件 修改用户表 class User(models. ...

  8. CH 2401 - 送礼 - [折半DFS+二分]

    题目链接:传送门 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后,他就不这么认为了.某神牛有N个礼物,且异常沉重,但是GY的力气也异常的大(-_-b) ...

  9. jmeter安装与环境变量配置

    因jmeter是java开发的,要想运行java开发的程序,必须先下载JDK一.jdk 1.下载jdk  jdk下载地址:https://www.oracle.com/technetwork/java ...

  10. 【转】前端框架天下三分：Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...