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

转载于:https://www.cnblogs.com/Counterrr/p/10608015.html

利用jQuery实现用户名片小动画相关推荐

  1. html微信拆红包动画特效,利用jQuery实现微信红包领取动画特效

    特效描述:利用jQuery实现 微信红包 领取动画特效.利用jQuery实现微信红包领取动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 点击打开 $(function () ...

  2. 小程序在wxml里转数字_2020年利用名片小程序开启数字化营销的方法

    数字营销是什么意思?所谓数字营销,就是指借助于互联网.电脑通信技术和数字交互式媒体来实现营销目标的一种营销方式.数字营销将尽可能地利用先进的计算机网络技术,以更有效.省钱地谋求新的市场的开拓和新的消费 ...

  3. html 圆圈图表插件,利用jquery html5实现图表动画圆形饼图

    特效描述:利用jquery html5实现 图表动画 圆形饼图.利用jquery html5实现图表动画圆形饼图 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 *{margin:0; ...

  4. jquery,bootstrap实现的用户名片信息提示

    原文:jquery,bootstrap实现的用户名片信息提示 源代码下载地址:http://www.zuidaima.com/share/1737371579649024.htm 鼠标移动到头像上时提 ...

  5. html靶心制作,如何利用PPT制作正中靶心小动画 实例教程

    用PPT做了个射靶的小动画,如下所示, 本篇我们来讲解用PPT绘制动画中的素材--标和靶,下篇会讲解如何制作该动画. 1. 首先我们来画一个靶. 当然,我们可以依次点击"插入"-- ...

  6. ajax 获取用户ip地址,利用jQuery实现Ajax获取当前IP地区位置代码

    特效描述:利用jQuery实现 Ajax 获取当前IP 地区位置代码.利用jQuery实现Ajax获取当前IP和地区位置代码 代码结构 1. 引入JS 2. HTML代码 AJAX检测ip和地区 $( ...

  7. jquery 学习笔记及小练习

    jQuery 1.简介 JQuery是js函数库 本质就是js库 jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化 jquery 核心函数 <!-- 1. 作为一般函数调用: ...

  8. js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...

    先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...

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

    将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能.我们来看看它 ...

最新文章

  1. 皮一皮：只恨不为女儿身...
  2. python开发能做什么-python能做什么？是什么？
  3. 为Process.waitFor设置超时
  4. 自动发现网络拓扑，一站式点击完成
  5. XElement 和 XDocument 到底有什么区别？
  6. C＃vs Java哪一个更快？ 将25k C＃转换为Java（2）
  7. Oracle JRockit Mission Control 4.1发布
  8. 萝卜家园win11系统32位微软原版镜像v2021.08
  9. python调用命令行获取pid_命令行命令/命令运行时的pid及获取
  10. 在Linux中怎么把用户添加到组中
  11. 虚拟机禅道服务器ip,Linux系统（虚拟机）安装禅道
  12. 万恶的华为，落魄的爱立信
  13. ssm框架重定向_精选 SSM 框架面试题整理
  14. 差距缩小 WLAN市场销量逼近有线网络
  15. MySQL解决去除逗号||把逗号替换为《》，/，?，。，-，+，* 等，并且截取该字段的后几位字符串（取字符串的固定长度）
  16. 2021年下半年信息安全工程师下午真题及答案解析
  17. ssq历史红蓝冷热号回归测试各个期与若干分析周期的中奖率（红号出现3个以上再输出）
  18. 计算机io设备是cpu控制的吗,操作系统--IO设备
  19. VB不能加载MSCOMCTL.OCX所需文件
  20. 微信支付android白屏,android 解决微信登陆白屏样式问题

热门文章

  1. jQuery中用ajax访问php接口文件
  2. 判断出栈顺序是否正确(栈的压入、弹出序列)
  3. android：HTTP通信 .
  4. Markdown编辑器使用
  5. 关于ASP.Net中的时间处理
  6. 文件上传的实现(C#)
  7. 《Apache Kafka》学习笔记
  8. windows上通过cmake-gui生成pytorch工程
  9. C++11多线程中std::call_once的使用
  10. linux驱动：i2c驱动（四）流程图之注册驱动