18-11-19

移动端专用颜色选择器

最近碰到个需求，移动端需要选取颜色，无奈原生的input:color在一部分浏览器上都很简陋，颜色不全，所以特地模仿PS做了一个简单的颜色选择器演示地址：http://wx.karlew.com/colorPicker/ （手机访问）源码：https://github.com/karlew/color-picker-mobile 有需要可以参考或使用。

移动端专用颜色选择器

18-11-19 3,755 views

最近碰到个需求，移动端需要选取颜色，无奈原生的input:color在一部分浏览器上都很简陋，颜色不全，所以特地模仿PS做了一个简单的颜色选择器演示地址：http://wx.karlew.com/colorPicker/ （手机访问） ...

阅读全文

17-10-30

分享一个阻止手机网页自动黑屏的解决方案

前端用户体验优化 3,974 views

手机上的网页长时间不触摸屏幕会熄灭，但有些网页例如重力感应的H5游戏，通常会长时间不需要用户触摸屏幕。那么如何使屏幕保持长亮状态？ NoSleep.js这插件提供了解决方案： <script src="js/NoSleep.min.js"></script> <script> var noSleep = new NoSleep(); noSleep.enable(); </script> 设置为 noSleep.disable() 则为系统默认会熄灭的状态点击查看演示

分享一个阻止手机网页自动黑屏的解决方案

17-10-30 3,974 views

手机上的网页长时间不触摸屏幕会熄灭，但有些网页例如重力感应的H5游戏，通常会长时间不需要用户触摸屏幕。那么如何使屏幕保持长亮状态？ NoSleep.js这插件提供了解决方案： <script src="js/NoSleep.min.j...

阅读全文

17-9-16

基于createJS简单跑酷

HTML5小游戏 5,183 views

极简版的跑酷，只有人物跳跃和一些平台，以及掉落平台处理演示地址：http://wx.karlew.com/run 源码：https://github.com/karlew/createJS-run/tree/master

基于createJS简单跑酷

17-9-16 5,183 views

极简版的跑酷，只有人物跳跃和一些平台，以及掉落平台处理演示地址：http://wx.karlew.com/run 源码：https://github.com/karlew/createJS-run/tree/master

阅读全文

17-8-12

安卓浏览器video层级最高问题解决方案

HTML5绘图,微信网页开发,移动端网页开发 9,541 views

先上一个完整的简单案例，能在ios和安卓手机上都解决视频层级和隐藏控制条的需求，建议用手机查看：demo 在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。腾讯给出了如下解决方案： <video src="http://xxx.mp4" x5-video-player-type="h5"/> 但使用如上属性，视频播放时会全屏，且会将top bar挤掉（没试过的可以自行测试下），且只适用于微信，点此跳到腾讯相关开发说明官方的方法走不通，其实可利用jsmpeg插件解决 jsmpeg是一个能将视频...

安卓浏览器video层级最高问题解决方案

17-8-12 9,541 views

先上一个完整的简单案例，能在ios和安卓手机上都解决视频层级和隐藏控制条的需求，建议用手机查看：demo 在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手...

阅读全文

17-8-10

手机端网页裁剪处理图片示例

HTML5绘图,移动端网页开发 3,614 views

代码较多，直接上链接（手机打开或PC浏览器开手机模拟模式打开） http://wx.karlew.com/editImg/ 用了上篇文章的blob方式预览图片，支持旋转，拖动，放大缩小图片代码下载地址：https://github.com/karlew/upLoadImg

手机端网页裁剪处理图片示例

17-8-10 3,614 views

代码较多，直接上链接（手机打开或PC浏览器开手机模拟模式打开） http://wx.karlew.com/editImg/ 用了上篇文章的blob方式预览图片，支持旋转，拖动，放大缩小图片代码下载地址：https://github.com/karlew/upLoa...

阅读全文

17-8-07

使用createObjectURL实现上传图片预览

js/jquery,移动端网页开发 4,348 views

目前无刷新预览图片一般有以下兼容性高到低排序的三种方法： 1.ajax提交图片后获取返回路径； 2.通过canvas将图片绘制显示； 3.通过window.url.createObjectURL(blob)创建blob:url 下面上一个方法3的简单案例，供有需要的朋友了解 <!DOCTYPE html> <html lang="en"> <head> <title>blobUpload</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #uploaderFiles{ width: 200px; ...

使用createObjectURL实现上传图片预览

17-8-07 4,348 views

目前无刷新预览图片一般有以下兼容性高到低排序的三种方法： 1.ajax提交图片后获取返回路径； 2.通过canvas将图片绘制显示； 3.通过window.url.createObjectURL(blob)创建blob:url 下面上一个方法3的简单案例，供...

阅读全文

17-7-20

解决IOS微信端无法自动播放音频

微信网页开发,移动端网页开发 4,758 views

苹果微信会拦截视频音频的自动播放，导致play()事件不生效，移动网页开发者可能会遇到或没发现到这问题，网页时不时需要自动播放背景音乐，应使用如下代码解决 var myaudio=document.getElementById("myaudio"); myaudio.volume=1; myaudio.play(); audioPlay(myaudio) //移动端自动播放音频 function audioPlay(ele){ if(window.WeixinJSBridge){ Weixi...

解决IOS微信端无法自动播放音频

17-7-20 4,758 views

苹果微信会拦截视频音频的自动播放，导致play()事件不生效，移动网页开发者可能会遇到或没发现到这问题，网页时不时需要自动播放背景音乐，应使用如下代码解决 var myaudio=document.getElementById("mya...

阅读全文

16-9-19

网页开启硬件加速使动画流畅

前端用户体验优化,移动端网页开发 4,296 views

在移动网页开发中，经常会写到一些很占硬件资源的效果，会导致效果不流畅，可用手机依次浏览下面两个网页： http://wx.karlew.com/speedup/no.html http://wx.karlew.com/speedup/yes.html 第一个网页在安卓下浏览会很卡，第二个却很流畅，区别是在使用动画的元素加上了这个CSS: .wrap img{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 加上这段css，即使没有进行3D转换，手机浏览器也会开启硬件加速。

网页开启硬件加速使动画流畅

16-9-19 4,296 views

在移动网页开发中，经常会写到一些很占硬件资源的效果，会导致效果不流畅，可用手机依次浏览下面两个网页： http://wx.karlew.com/speedup/no.html http://wx.karlew.com/speedup/yes.html 第一个网页在安...

阅读全文