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>
