html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的资料</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="../font/iconfont.css"/>
<link type="text/css" rel="stylesheet" href="../styles/mymsg.css"/>
</head>
<body>
<!--头部-->
<div class="hea border">
<ul class="header">
<li class="left-btn"><a href="javascript:window.history.go(-1);"><span class="iconfont icon-fanhui"></span></a></li>
<li class="page-title">我的资料</li>
<li class="right-btn"><a href="###"><span class="iconfont icon-fenxiang"></span></a></li>
</ul>
</div>
<!--内容区域-->
<div class="content">
<ul>
<li class="border">更换头像<div class="box"><img class="bendi" src="../images/mi.gif"/><span class="iconfont icon-11"></span></div></li>
<li class="border">更换主题背景<div class="box"><img src="../images/mi.gif"/><span class="iconfont icon-11"></span></div></li>
<li class="border">手机号<div class="box"><span class="iconfont icon-11"></span></div></li>
<li class="border">昵称<div class="box">匿名<span class="iconfont icon-11"></span></div></li>
<li class="border">性别<div class="box">未知<span class="iconfont icon-11"></span></div></li>
<li class="border">生日<div class="box"><span class="iconfont icon-11"></span></div></li>
<li class="border">所在地<div class="box">点击设置<span class="iconfont icon-11"></span></div></li>
<li class="border">音乐喜好<div class="box">点击设置<span class="iconfont icon-11"></span></div></li>
</ul>
</div>
<div class="tankuang">
<p class="select">选择图片</p>
<div class="inner">
<p class="xiangce upload">从手机相册选择 <input type="file" class="upload_pic" id="upload" /></p>
<p class="close">取消</p>
</div>
</div>
</body>
</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:
<script SRC="../../js/jq.js"></script>
<script>
//调用相册
var addW=parseInt($(".bendi").css("width"));
var addH=parseInt($(".bendi").css("height"));
$(".bendi").click(function() {
$(".tankuang").css({
"display": "block"
});
})
$(".close").click(function() {
$(".tankuang").css({
"display": "none"
});
})
var input1 = document.getElementById("upload");
if(typeof FileReader === 'undefined') { //使用FileReader 对象,web应用程序可以异步的读取存储在用户计算机上的文件
//result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input1.setAttribute('disabled', 'disabled');
} else {
input1.addEventListener('change', readFile, false);
}
//调用摄像机
var a = null
//调用相册
function readFile() {
$(".tankuang").css({
"display": "none"
})
var file = this.files[0]; //获取上传文件列表中第一个文件
if(!/image\/\w+/.test(file.type)) {
//图片文件的type值为image/png或image/jpg
alert("文件必须为图片！");
return false;
}
// console.log(file);
var reader = new FileReader(); //实例一个文件对象
reader.readAsDataURL(file); //把上传的文件转换成url
//当文件读取成功便可以调取上传的接口
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
a = image.src;
// var max=200;
// 绑定load事件处理器，加载完成后执行，避免同步问题
image.onload = function() {
console.log(a);
$(".bendi").attr({"src":a});
};
}
};
</script>
扫一扫
1480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
