前端
关注
分享
扫一扫
萌面怪瘦呀
web前端女攻城狮
展开
-
js移动端页面判断是否是iphoneX
判断iphoneXfunction isIPhoneX(fn){ var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { if (screen.height == 812 &&...原创 2018-05-17 16:32:43 · 19449 阅读 · 0 评论 -
移动端自定义video播放控件controls（带播放暂停，进度条拖拽）
效果图如下html结构部分<div class="player"> <video id="video" muted poster="images/video_poster.png"> <source src="https://video.pearvideo.com/mp4/adshort/20190702/cont-1572578-14079299_adp...原创 2019-07-04 15:25:28 · 8272 阅读 · 5 评论 -
H5 Canvas绘制圆形进度条动画效果
效果如图效果比较简单html结构部分<canvas id="canvas" width="110" height="110"></canvas>js部分var c = document.getElementById("canvas");//获取绘图上下文var ctx = c.getContext("2d"); //开始位置var x = -0.5;...原创 2019-07-18 17:44:39 · 1352 阅读 · 0 评论 -
swiper4移动端导航栏tab滑动切换
swiper4移动端导航栏tab滑动切换效果效果如图：首先引入swiper的css和js文件官网下载地址<link href="swiper.min.css" rel="stylesheet"><script src="swiper.min.js"></script>html结果部分<body> <div class="ta...原创 2019-07-24 14:15:06 · 3159 阅读 · 3 评论 -
H5 FileReader 读取本地图片文件并显示
效果如图上代码<!--html结构部分--><input type="file"/><img src="" /><!--js部分-->var inp = document.querySelector('input');inp.onchange = function(){ var file = this.files[0]; //获...原创 2019-07-24 15:40:27 · 1526 阅读 · 0 评论