1、实现头的方法代码。
2、编写CSS样式的方法代码。
3、html上传代码。
4、JS处理方法代码。
5、测试结果如下。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
HTML5页面如何在手机端浏览器调用相机、相册功能开发微信端浏览器访问的HTML5的页面，页面中有一个<input id="input" type="file"/>标签，iOS直接就支持吊起相机拍照或是相册选择，
但android中不支持吊起相机拍照，只能吊起相册选择，网上的帖子说是因为android屏蔽了文件上传功能还是怎么的，没看明白。
此篇博文记录如何解决这一问题，使得android也可以直接吊起相机拍照。
在查资料的之后，总结了一下用input调用相机和相册功能的方法，之前没有深入了解过，现在整理一下：
不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5页面如何在手机端浏览器调用相机、相册功能</title>
</head>
<body>
<div>
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
</div>
</body>
</html>
accept表示打开的系统文件目录
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音。
如果不加上capture,则只会显示相应的，例如上述三种依次是：拍照或图库，录像或图库，录像或拍照或图库，加上capture之后不会调用图库。
其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture，
所以只用写成：<input type="file" accept="image/*" multiple>就可以，可以在手机上测试一下。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title>transform-style实现Div的3D旋转-柯乐义</title>
<style>
*{font-size: 24pxcolor: #00ff00padding:0margin:0}
#container {
position: relative
height: 300px
width: 300px
-webkit-perspective: 500
margin-top: 200px
margin-right: auto
margin-left: auto
}
#parent-keleyi-com {
margin: 10px
width: 280px
height: 280px
background-color: #666
opacity: 0.3
-webkit-transform-style: preserve-3d
-webkit-animation: spin 15s infinite linear
}
#parent-keleyi-com >div {
position: absolute
top: 40px
left: 40px
width: 280px
height: 200px
padding: 10px
-webkit-box-sizing: border-box
}
#parent-keleyi-com >:first-child {
background-color: #000
-webkit-transform: translateZ(-100px) rotateY(45deg)
}
#parent-keleyi-com >:last-child {
background-color: #333
-webkit-transform: translateZ(50px) rotateX(20deg)
-webkit-transform-origin: 50% top
}
/*执行Y轴旋转360度动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0)}
to {-webkit-transform: rotateY(360deg)}
}
</style>
</head>
<body>
<div>请使用支持CSS3的浏览器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>
<div id="container">
<div id="parent-keleyi-com">
<div><a href="/">柯乐义</a></div>
<div><a href="/">keleyi.com</a></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）