18-11-19

移动端专用颜色选择器

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

移动端专用颜色选择器

18-11-19 6,274 views

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

阅读全文

17-8-12

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

HTML5绘图,微信网页开发,移动端网页开发 14,920 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 14,920 views

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

阅读全文

17-8-10

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

HTML5绘图,移动端网页开发 5,970 views

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

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

17-8-10 5,970 views

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

阅读全文

17-8-07

使用createObjectURL实现上传图片预览

js/jquery,移动端网页开发 7,294 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 7,294 views

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

阅读全文

17-7-20

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

微信网页开发,移动端网页开发 8,252 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 8,252 views

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

阅读全文

16-9-19

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

前端用户体验优化,移动端网页开发 6,451 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 6,451 views

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

阅读全文

16-6-12

触屏设备游戏的几种输入控制方式

移动端网页开发 4,497 views

在移动端游戏开发中(app或是网页)，对于输入控制有好几种方式实现： 1.点击事件(onclick,tap) 最常见的方式，且分成两种使用形式：像笨鸟先飞一类不需要判断点击位置的，以及像消消乐一类需要判断点击位置的。 document.getElementById(ele).onclick = function(event){ x=event.clientX; y=event.clientY; //some js code } 2.拖动控制(touchmove) 庄园类或装扮类游戏使用较多，有个缺点是拖动时手指会遮住原物体及目标区域。 document.addEventListener("touchmove", function(event){ x = ev...

触屏设备游戏的几种输入控制方式

16-6-12 4,497 views

在移动端游戏开发中(app或是网页)，对于输入控制有好几种方式实现： 1.点击事件(onclick,tap) 最常见的方式，且分成两种使用形式：像笨鸟先飞一类不需要判断点击位置的，以及像消消乐一类需要判断点击位置...

阅读全文

16-1-31

清除safari默认的按钮样式

CSS/CSS3样式,移动端网页开发 6,748 views

在移动端safari下，<input type="button" value="test">会被赋予默认的样式，即使定义了background和border-radius等样式，还是不能达到预期效果。如上的蓝色按钮样式为： .ipt{ width:94%; height:2.2rem; background:#d8f3ff; border:1px solid #0a3d53; color:#000; font-size:1.2rem; font-family:custom; margin-top:5%; -webkit-box-shadow:2px 2px 2px; -moz-...

清除safari默认的按钮样式

16-1-31 6,748 views

在移动端safari下，<input type="button" value="test">会被赋予默认的样式，即使定义了background和border-radius等样式，还是不能达到预期效果。如上的蓝色按钮样式为： .ipt{ wi...

阅读全文