我爱撸码，撸码使我感到快乐！
大家好，我是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. 创建多线程Thread

    创建一个线程: # 方式一from threading import Thread import time def func(n): time.sleep(1) print(n) t = Thread ...

  2. Gym 101972

    F读错题wa了三个小时.自闭了,不然I题有可能能出的..已经想到组合数也敲完组合数板子了. A:这...**题吧,第一眼看的这个就秒了 #include<bits/stdc++.h> #d ...

  3. PentestBox在win10里打不开工具

    PentestBox详细安装过程:http://www.cnblogs.com/ESHLkangi/p/8336398.html 在使用PentestBox的时候出现了打不开工具的问题,最后看到一个老 ...

  4. Windows 环境下 wampserver 与 phpStudy 的环境配置

    一. wamperserver 1.下载好安装到本地指定目录,官网下载地址  http://www.wampserver.com 2.根据自己实际的安装路径,D:\pc\wampserver\wamp ...

  5. vue-cli+webpack+router+vuex---之vuex使用

    有信心的可以去看官方的文档 vue 的官方文档有个显著的特点---代码粘贴不全 Vue中文站:cn.vuejs.org vue-router官方教程:router.vuejs.org/zh-cn vu ...

  6. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  7. 探究Java中的锁

    一.锁的作用和比较 1.Lock接口及其类图 Lock接口:是Java提供的用来控制多个线程访问共享资源的方式. ReentrantLock:Lock的实现类,提供了可重入的加锁语义 ReadWrit ...

  8. centos6 安装python2.7 并做软件兼容处理 及 MySQLdb模块安装

    相关软件准备 https://www.python.org/ftp/python/2.7.15/Python-2.7.15.tgz https://pypi.org/project/setuptool ...

  9. SQL Server 2008中的CDC(Change Data Capture)功能使用及释疑

    SQL Server 2008中的CDC(Change Data Capture)功能使用及释疑 关键词:CDC   原文:http://www.cnblogs.com/chenxizhang/arc ...

  10. .net 调用python 实例

    如标题 ,python属于解释型语言,所以直接将python的文件copy到项目中 新建.net控制台应用程序,直接nuget  IronPython 安装成功后 在项目内新建Sum文件夹,将py.p ...