上传头像,js实现

html:




   
    我的资料
   
   
   



   


       

               

  •            
  • 我的资料

  •            

  •        

   


   

       

               
  • 更换头像

  •            
  • 更换主题背景

  •            
  • 手机号

  •            
  • 昵称
    匿名

  •            
  • 性别
    未知

  •            
  • 生日

  •            
  • 所在地
    点击设置

  •            
  • 音乐喜好
    点击设置

  •        

   




选择图片



从手机相册选择


取消











css:

@charset "UTF-8";
/**
 * Yo框架全局基础方法
 -----------------------
 * Yo内置了包括响应式方案,CSS3兼容性方案,厂商前缀方案,iconfont方案,flex布局等全局方法
 *
 * @class classes
 * @module Yo
 */
/**
 * 给需要的属性加厂家前缀
 * @method prefix
 * @param {String} $property 指定属性
 * @param {String} $value 指定属性值
 */
/**
 * 四则运算
 * @method calc
 * @param {String} $property 指定需要进行计算的CSS属性
 * @param {String} $value 与原生CSS语法一致,使用方式如:@include calc(width, 100% - 0.1rem);
 */
/**
 * 定义渐变色值
 * @method gradient
 * @param {String} $type 指定渐变的4种类型:linear, repeating-linear, radial, repeating-radial
 * @param {String} $gradient 指定渐变取值,与w3c最新原生语法一致
 */
/**
 * 定义响应式方案
 * @method responsive
 * @param {String} $media 指定媒体查询条件
 */
/**
 * 定义字体图标
 * @method yofont
 */
/**
 * 滤镜
 * @method filter
 * @param {String} $filter 取值与原生语法一致
 */
/**
 * 定义UA默认外观
 * @method appearance
 * @param {String} $appearance 指定UA外观类型
 */
/**
 * 定义是否可以选中元素
 * @method user-select
 * @param {String} $user-select 指定是否可以选中
 */
/**
 * 定义背景图像缩放(Android Browser2.3.*还需要厂商前缀)
 * @method background-size
 * @param {String | Length} $background-size 指定背景图缩放值
 */
/**
 * 定义背景裁减(Android Browser2.3.*还需要厂商前缀)
 * @method background-clip
 * @param {String} $background-clip 指定背景图缩放值
 */
/**
 * 定义背景显示区域(Android Browser2.3.*还需要厂商前缀)
 * @method background-origin
 * @param {String} $background-origin 指定背景图缩放值
 */
/**
 * 定义盒模型
 * @method box-sizing
 * @param {String} $box-sizing 的2个值分别为:content-box(标准盒模型) | border-box(怪异盒模型)
 */
/**
 * 定义圆角
 * @method border-radius
 * @param {String} $border-radius 取值与原生语法一致
 */
/**
 * 定义简单变换
 * @method transform
 * @param {String} $transform 取值与原生语法一致
 */
/**
 * 定义变换原点
 * @method transform-origin
 * @param {String} $transform-origin 取值与原生语法一致
 */
/**
 * 定义动画
 * @method animation
 * @param {String} $animation 取值与原生语法一致
 */
/**
 * 定义补间
 * @method transition
 * @param {String} $transition 取值与原生语法一致
 */
/**
 * 定义显示类型为伸缩盒
 * @method flexbox
 * @param {String} $flexbox 默认值:flex,取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素如何分配空间
 * @method flex
 * @param {String} $flex 默认值:1,取值与最新原生语法一致
 * @param {String} $direction 默认值: row
 */
/**
 * 定义伸缩盒子元素的排版顺序
 * @method order
 * @param {String} $order 默认值:1,取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素的流动方向
 * @method flex-direction
 * @param {String} $flex-direction 默认值:row,取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素溢出排版
 * @method flex-wrap
 * @param {String} $flex-wrap 默认值:nowrap,取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素的水平对齐方式
 * @method justify-content
 * @param {String} $justify-content 默认值:center,取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素的垂直对齐方式
 * @method align-items
 * @param {String} $align-items 默认值:center,取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素自身的垂直对齐方式
 * @method align-self
 * @param {String} $align-self 默认值:center,取值与最新原生语法一致
 */
/**
 * 定义root root-scroll
 * @method root-scroll
 * @param {String} $root-scroll 指定scroll类型,取值overflow属性的标准值
 */
/**
 * 定义是否有滚动条
 * @method overflow
 * @param {String} $overflow 默认值:auto,取值与最新原生语法一致
 */
/**
 * 生成矩形方法
 * @method rect
 * @param {Length} $width 定义矩形的长度
 * @param {Length} $height 定义矩形的高度
 */
/**
 * 生成正方形方法
 * @method square
 * @param {Length} $size 定义正方形的边长
 */
/**
 * 生成圆形方法
 * @method circle
 * @param {Length} $size 定义圆的半径长度
 * @param {Length} $radius 定义圆的圆角半径长度
 */
/**
 * 生成全屏方法
 * @method fullscreen
 * @param {Integer} $z-index 定义层叠级别
 */
/**
 * 清除浮动方案
 * @method clearfix
 */
/**
 * 链接处理方法
 * @method link
 * @param {Color} $color 定义链接颜色
 */
/**
 * 强制换行方案
 * @method wrap
 */
/**
 * 单行文本溢出显示方案
 * @method ellipsis
 * @param {Boolen} $ellipsis 定义是否需要省略号
 */
/**
 * 文字隐藏方案
 * @method texthide
 */
/**
 * 清除间隙方案-容器
 * @method killspace
 */
/**
 * 清除间隙方案-子级
 * @method killspace-item
 */
/**
 * 未知尺寸元素垂直居中解决方案-容器
 * @method valign
 */
/**
 * 未知尺寸元素垂直居中解决方案-子级
 * @method valign-item
 */
/**
 * 已经尺寸元素垂直居中解决方案
 * @method alignment
 * @param {Length} $width 居中元素的宽度
 * @param {Length} $height 居中元素的高度
 */
/* border */
i {
  font-style: normal; }


/*内容的背景色*/
/*作用不很多*/
/*普通字体颜色*/
/*图标颜色*/
/*按钮的颜色*/
/*播放按钮的颜色*/
/*普通字体hover时的color*/
/*list  lianbiao*/
/*列表*/
/*一像素边框*/
.border {
  border: none;
  position: relative; }


.border:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #d0d0d0;
  transform: scaleY(0.5); }


.border1 {
  border: none;
  position: relative; }


.border1:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #d0d0d0;
  transform: scaleY(0.5); }


* {
  margin: 0;
  padding: 0; }


body {
  background-color: #f4f5f7;
  font-family: "Microsoft Yahei";
  font-size: 14px;
  overflow: hidden; }


img {
  display: block; }


html {
  font-size: 31.25vw; }


ul li, nav li {
  list-style: none; }


.header {
  display: flex;
  height: 0.54rem;
  line-height: 0.53rem; }
  .header .left-btn, .header .right-btn {
    width: 0.5rem;
    text-align: center; }
    .header .left-btn a, .header .right-btn a {
      color: #fff;
      text-decoration: none; }
      .header .left-btn a span, .header .right-btn a span {
        font-size: 20px; }
  .header .page-title {
    flex: 1;
    color: #fff; }


.btn {
  width: 100%;
  height: 0.4rem; }
  .btn .reg {
    padding: 0 0.05rem;
    width: 92%;
    margin: 0 auto;
    display: block;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    font-size: 16px;
    background-color: #ff6a6e;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-top: 0.3rem;
    border-radius: 0.04rem; }


.mark {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 90;
  display: none; }


.share {
  width: 100%;
  background: #fff;
  z-index: 99;
  position: absolute;
  left: 0;
  bottom: -4.08rem;
  display: none; }
  .share ul {
    width: 90%;
    padding: 0 5%; }
    .share ul li {
      height: 0.5rem;
      line-height: 0.5rem;
      border-bottom: 1px solid #eee;
      color: #333333; }
      .share ul li span {
        margin-right: 0.1rem;
        color: #ff6a6e; }


#pullDown,
#pullUp {
  background: #f4f5f7;
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: bold;
  font-size: 14px;
  color: #888;
  width: 100%;
  text-align: center; }


#pullDown .pullDownIcon,
#pullUp .pullUpIcon {
  display: inline-block;
  float: left;
  position: absolute;
  left: 30%;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background: url(../images/pull-icon.png) 0 0 no-repeat;
  -webkit-background-size: 0.4rem 0.8rem;
  background-size: 0.4rem 0.8rem;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 250ms; }


#pullDown .pullDownLabel,
#pullUp .pullUpLabel {
  margin-left: 0.2rem;
  display: inline-block;
  height: 0.4rem;
  line-height: 0.4rem; }


#pullDown .pullDownIcon {
  -webkit-transform: rotate(0deg) translateZ(0); }


#pullUp .pullUpIcon {
  -webkit-transform: rotate(-180deg) translateZ(0); }


#pullDown.flip .pullDownIcon {
  -webkit-transform: rotate(-180deg) translateZ(0); }


#pullUp.flip .pullUpIcon {
  -webkit-transform: rotate(0deg) translateZ(0); }


#pullDown.loading .pullDownIcon,
#pullUp.loading .pullUpIcon {
  background-position: 0 100%;
  -webkit-transform: rotate(0deg) translateZ(0);
  -webkit-transition-duration: 0ms;
  -webkit-animation-name: loading;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear; }


@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg) translateZ(0); }
  to {
    -webkit-transform: rotate(360deg) translateZ(0); } }
.sideSlide {
  width: 80%;
  height: 100%;
  position: fixed;
  left: -80%;
  top: 0;
  background: #f4f5f7;
  z-index: 100; }
  .sideSlide .slideTop {
    width: 100%;
    height: 1rem;
    padding-bottom: 0.2rem;
    background-color: #ff6a6e;
    position: relative;
    color: #fff; }
    .sideSlide .slideTop .pic {
      position: absolute;
      left: 0.15rem;
      top: 0.2rem; }
    .sideSlide .slideTop a {
      color: #333333;
      text-decoration: none; }
    .sideSlide .slideTop i {
      position: absolute;
      left: 0.8rem;
      top: 0.35rem; }
    .sideSlide .slideTop span {
      position: absolute;
      right: 0.12rem;
      top: 0.14rem; }
  .sideSlide .slideMiddle {
    width: 100%; }
    .sideSlide .slideMiddle li {
      line-height: 0.4rem;
      height: 0.4rem;
      padding: 0 0.18rem;
      font-weight: bold;
      color: #696969; }
      .sideSlide .slideMiddle li span {
        font-size: 18px;
        padding-right: 0.3rem; }
      .sideSlide .slideMiddle li span.close {
        font-size: 14px;
        color: #ff6a6e;
        float: right;
        padding: 0; }
  .sideSlide .slideBottom {
    width: 100%;
    display: flex;
    margin-top: 0.5rem; }
    .sideSlide .slideBottom li {
      flex-grow: 1;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      font-size: 14px;
      color: #757575;
      font-weight: bold; }
    .sideSlide .slideBottom li:nth-of-type(1) {
      border-right: 1px solid #9d9d9d; }


footer {
  width: 100%;
  height: 0.5rem;
  position: fixed;
  bottom: 0;
  background: #fff; }


.footer {
  width: 100%;
  height: 0.5rem;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 50; }


.musicPlay {
  width: 100%;
  padding-left: 0.1rem; }


.muicLeft {
  width: 50%;
  float: left; }
  .muicLeft dl {
    position: relative;
    height: 0.45rem;
    padding: 0.02rem 0; }
  .muicLeft dt {
    float: left;
    width: 0.45rem;
    height: 0.45rem;
    padding-bottom: 0.15rem; }
    .muicLeft dt img {
      width: 100%;
      height: 100%; }
  .muicLeft dd:nth-of-type(1) {
    float: left;
    width: 50%;
    padding-left: 0.08rem; }
    .muicLeft dd:nth-of-type(1) p {
      height: 0.24rem;
      line-height: 0.24rem; }
    .muicLeft dd:nth-of-type(1) p:nth-of-type(1) {
      font-size: 12px;
      color: #333333; }
    .muicLeft dd:nth-of-type(1) p:nth-of-type(2) {
      font-size: 10px;
      color: #999999; }


.musicRight {
  width: 50%;
  display: flex;
  justify-content: space-around;
  text-align: center; }
  .musicRight li {
    flex: 1;
    line-height: 0.48rem; }
    .musicRight li span {
      font-size: 18px;
      color: #ff6a6e; }


.blur {
  -webkit-filter: blur(30px);
  /* Chrome, Opera */
  -moz-filter: blur(30px);
  -ms-filter: blur(30px);
  filter: blur(30px); }


.scrollBar {
  position: absolute;
  width: 0;
  height: 0.03rem;
  left: 0;
  bottom: 0;
  background-color: #ff6a6e;
  z-index: 19; }


body {
  box-sizing: border-box; }


.header {
  z-index: 3;
  background-color: #fff; }
  .header .page-title {
    color: #333333;
    font-weight: bold; }
  .header .left-btn a, .header .right-btn a {
    color: #333333; }


.content {
  width: 100%; }
  .content ul li {
    height: 0.5rem;
    line-height: 0.5rem;
    font-weight: bold;
    padding-left: 0.1rem; }
    .content ul li .box {
      float: right;
      width: 1rem;
      text-align: center; }
      .content ul li .box img {
        width: 0.4rem;
        height: 0.4rem;
        float: left;
        margin-top: 0.05rem; }
    .content ul li span {
      float: right;
      padding-right: 0.2rem; }
      
/*弹框--调用相册*/
.tankuang{
width:2rem;
height:auto;
overflow: hidden;
background:#fff;
position: absolute;
bottom:2rem;
left:0.5rem;
display:none;
z-index: 3;
border-radius: 0.2rem;
}
.tankuang .select{
width:85%;
color:#fff;
font-size:18px;
background :blueviolet;
padding-top:.1rem;
padding-left:.3rem;
}
.upload_pic{
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
    
    
}
.tankuang .inner{
width:85%;
height:2rem;
background:#fff;
}
.tankuang .inner .paizhao{
font-size:18rem;
color:#000;
height:1rem;
line-height:1rem;
border-bottom:1px solid #D0D0D0;
}
.tankuang .inner .xiangce{
font-size:18px;
color:#000;
line-height:1.2rem;
position: relative;
left:15%;

}
.tankuang .inner .close{
font-size:16px;
color:#fff;
background:#A0A0A0;
text-align:center;
margin:0 .2rem;
height:30px;
line-height:30px;
}
/*# sourceMappingURL=mymsg.css.map */

jquery:



你可能感兴趣的:(HTML5+CSS3,Jquery,JavaScript)