我爱撸码，撸码使我感到快乐！
大家好，我是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. A - The Water Problem

    In Land waterless, water is a very limited resource. People always fight for the biggest source of w ...

  2. 接口自动化测试 （三）request.post

    上一节介绍了  requests.get()  方法的基本使用,本节介绍  requests.post()  方法的使用: 本文目录: 一.方法定义 二.post方法简单使用 1.带数据的post 2 ...

  3. pro.antd.design

    有关react的ui组建antd.design新推出的pro版本,最近用到了路由方面. common与routes; 首先需要在menu.js里面配置: { name: '精品', icon: 'da ...

  4. 性能优化-YAHOO军规

    1.尽可能减少http请求数量 2.使用CDN 3.添加Expire/Cache-Control头 4.启用Gzip压缩 5.将css放在页面最上 6.将script放在页面最下 7.避免在CSS中使 ...

  5. 微信小程序（微信应用号）组件讲解[申明:来源于网络]

    微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html

  6. Unified Temporal and Spatial Calibration for Multi-Sensor Systems

    下载链接:点击 为了提高机器人状态估计的准确性和鲁棒性,越来越多的应用依赖于来自多个互补传感器的数据. 为了在传感器融合中获得最佳性能,这些不同的传感器必须在空间上和时间上相互对准.为此,已经开发了许 ...

  7. transition:all .2s

    all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样.

  8. scala-创建泛型数组（T: Manifest）

    def arrayT[T: Manifest](ary: T*): Array[T] = {//接受多个参数 val arys = new Array[T](ary.length) //初始化一个数组 ...

  9. tensorboard使用过程错误记录

    首先代码如下: def word_vis(self,file,txtname):#生成的模型存放的地址:word_vismodel'+file为新建的文件夹名 txtname是通过word2vec生成 ...

  10. 家庭记账本之微信小程序（二）

    在网上查阅了资料后,了解到了在完成微信小程序之前要完成注册阶段的工作,此次在这介绍注册阶段的流程. 1.首先你要确定小程序的定位.目的以及文案资料等(准备工作). 2.打开微信公众平台官网,点击右上角 ...