HTML5
羽筠
这个作者很懒,什么都没留下…
展开
-
Canvas文本换行处理2.0
原处理方法中canvas写入的多行文本无论多少行数据,都是顶部在一条水平线上,但我们在日常开发中,需要根据需求不同,如:列表中的多行文本数据,需要设置无论多少行数据,都需要统一的基准Y轴居中的展示效果,如图:名称一列数据显示在当前行内上下居中展示效果原创 2024-07-19 18:35:18 · 490 阅读 · 0 评论 -
echarts图表展示地图指定区域
echarts地图展示指定区域指定区域获取方式:城市范围选择器:http://datav.aliyun.com/portal/school/atlas/area_selectorecharts地图展示指定区域及经纬度设置展示标注原创 2023-03-22 14:29:44 · 2356 阅读 · 0 评论 -
vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法
一般在开发时,设置了 date/time/datetime 类型的 input 属性 placeholder 时,发现实际展示中却并不生效,处理逻辑,判断表单项未设置值时,则设置伪类样式,文本内容为 placeholder 属性值,展示样式重叠在表单项组件上,以达到提示文本效果;原创 2024-04-08 17:49:09 · 461 阅读 · 1 评论 -
H5页面,上下滑动翻页(整页翻书切换效果)
页面间的切换:整页翻书的切换效果。原创 2023-09-07 17:05:23 · 2723 阅读 · 1 评论 -
CSS 图片遮罩 -webkit-mask
渐变遮罩-webkit-mask: linear-gradient(#000, transparent);图片遮罩语法与 background 相同:-webkit-mask: url(xxx.png) repeat center top;-webkit-mask-size: contain;也可分别设置属性:-webkit-mask-image: url(xxx.png);-webkit-mask-repeat: no-repeat;-webkit-mask-position: cente原创 2022-02-07 17:44:12 · 7959 阅读 · 0 评论 -
使用腾讯位置服务获取位置及设置地图点标记文本标记demo
需要先创建应用和Key,去创建:https://lbs.qq.com/dev/console/application/mine腾讯位置服务使用:地图组件获取位置(开发指南:https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation)引入Javascript API GL初始化地图及设置点标记文本标记(开发指南:https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverv原创 2021-07-15 18:01:41 · 4547 阅读 · 0 评论 -
web前端-移动端小技巧
移动端,数字去除电话格式,头部加 移动端,某区域设置有滚动条时,解决滚动不顺畅问题,实现弹性滚动,加样式 :overflow-y:auto; -webkit-overflow-scrolling:touch;移动端,给元素加click事件没反应时,加样式:cursor:pointer;试试看移动端,当你点击一个链接或者通过Javascript定义的可点原创 2015-08-13 17:50:08 · 1240 阅读 · 0 评论 -
CANVAS中使用跨域图片toDataURL转base64图片时报错处理
CANVAS中使用跨域图片转base64图片时报错处理:function getBase64(imgUrl) { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); // 至关重要 xhr.responseType = ...转载 2020-08-30 17:02:07 · 645 阅读 · 0 评论 -
h5九宫格抽奖
九宫格抽奖-jquery:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="wid...原创 2020-04-07 16:36:58 · 1439 阅读 · 0 评论 -
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
对 web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) 的优化修改,上传的可编辑的图片在指定区域中,计算图片信息以最合适的大小及位置显示// 上传的图片画入指定区域位置设置:// bmp.x = stage.width / 2;// bmp.y = stage.height / 2;// bmp.x = '海报图中显示区域的起始:X' + '海报图中...原创 2020-03-01 18:22:21 · 76505 阅读 · 0 评论 -
使用FormData对象AJAX提交文件
FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容。它是一个html5的javascript对象,非常的强大。FormData可以凭空创建一个对象,然后往这个对象里面添加数据,然后直接提交,不需要写一行html代码,如下:var form = new FormData();form.append("username","name");form.append("...原创 2019-11-15 16:36:36 · 257 阅读 · 0 评论 -
循环展示图片(画中画效果)
循环展示图片(画中画效果),页面展示效果就是每次显示两张叠加起来的图片,上面的一张图在下面的图的里面,画面不断的缩小,当下面的一张图缩放到窗口大小时它自己切换成上面的图片,叠加在另一张新加载的图片(下面的图)的上面最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的,为了使其看上去有不间断的变化效果,加上了CSS3过渡的效果,此功能实现的所有HTML/CSS/JS都直接原创 2017-07-06 16:50:41 · 3426 阅读 · 0 评论 -
涂抹CANVAS,判断清除完毕执行操作
涂抹CANVAS,判断清除完毕执行操作clearCanvas.js代码如下:function clearCanvas(imgSrc,Bl,callback){ var ctx = null; var mouseX = null; var mouseY = null; var _width = 0; var _height = 0; function touchStartEven原创 2017-07-24 21:04:22 · 197988 阅读 · 0 评论 -
常用收藏(自己用的)
PC端&移动端的页面常用的到的CSS、JS、HTML收藏(自己用的)原创 2015-12-04 15:31:14 · 16942 阅读 · 1 评论 -
移动端页面上下滑动,大小、透明度的变化视觉差异效果切换页面
移动端页面上下滑动,大小、透明度的变化视觉差异效果切换页面上滑动进入下一页 , 当前页从 scale=1 放大至 比1的大倍数 ,并且透明度降低至0 ,下一页从 scale=0.1 放大至 scale=1 , 透明度无变化下滑动进入前一页 , 当前页从 scale=1 缩小至 scale=0.1 ,透明度无变化 ,下一页从 比1的大倍数 缩小至 scale=1 , 透明度从0至1的原创 2017-09-25 16:21:32 · 9077 阅读 · 0 评论 -
循环展示图片(画中画效果)CANVAS2.0版
循环展示图片(画中画效果)CANVAS2.0版之前设计的一版在测试当中有点问题,PC端测试是没有问题的,但在手机上访问时,切屏时就出现闪屏(本就出现的大图没有出现,是之前的小图突然变大,一闪而过,然后再显示正常的大图)问题,总结原因,应该还是在移动端加载慢的问题这一版做了优化,第一屏时加载三张图片,把下一屏的图预加载出来,到下一屏的时候,只需再预加载下一屏的一张图即可,经过测试,的确不会出原创 2017-07-07 11:12:31 · 2277 阅读 · 0 评论 -
安卓微信中播放视频终于可以不再自动全屏啦
最新的设置安卓视频不全屏播放(不知道是否全部安卓机型都支持)的方法前两天做了一个石头剪刀布的视频游戏项目,测试过程中找到了更加简便的方法,分享下,如下设置HTML代码:<video id="videoID" controls src="XXX" poster="XXX.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline=&qu原创 2017-05-27 14:08:24 · 27761 阅读 · 9 评论 -
微信音频接口调用demo
前几天做一个录音送祝福的项目,事先做了一个demo,记录一下,方便日后需要时套上直接使用<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&原创 2018-02-10 17:49:06 · 9342 阅读 · 10 评论 -
使用jquery.qrcode生成二维码
1、HTML部分设置代码:<div id="code"></div>2、包含jquery.qrcode.js(https://github.com/jeromeetienne/jquery-qrcode/blob/master/jquery.qrcode.min.js)<script type="text/javascript" src="jquery.qrcode....原创 2018-03-06 17:05:39 · 480 阅读 · 0 评论 -
移动端ios直接设置currentTime无效解决方法
前段时间做过一个项目,每个页面设置了同一个背景音乐,但客户要求音乐从一个页面进入另一个页面后,要接着上一页面播放时间播放,所以进入新页面后设置currentTime为上个页面播放时间但ios系统直接设置无效,在判断音乐可播放时(canplay)再设置currentTime才可以,但在安卓设备上也这样判断设置则也无效,所以要根据不同系统设置,以下是针对ios、安卓系统设置的代码注:$myVi...原创 2018-03-06 17:38:30 · 8388 阅读 · 2 评论 -
CSS3设置元素显示3D效果
显示效果:以下是图片素材以下是页面代码部分<!doctype html><html><head><meta charset="utf-8"><title>CSS3设置图片显示3D效果</title><meta charset="UTF-8">原创 2018-07-25 10:07:09 · 2818 阅读 · 0 评论 -
ajax结合php处理图片
1、处理保存 base64编码 的图片,并返回保存的图片URL(可用来处理保存CANVAS转成的图片的)2、处理图片,并返回 base64编码 的图片(一般解决JS跨域的问题)demo代码(测试请用服务器环境:localhost):<!DOCTYPE><html><head><meta http-equiv="Content-Type" ...原创 2018-07-31 17:29:18 · 1140 阅读 · 0 评论 -
canvas单、多行文本通过配置参数循环写入
canvas单、多行文本通过配置参数循环写入demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><原创 2018-10-19 10:56:38 · 1171 阅读 · 0 评论 -
未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调)demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X...原创 2018-12-27 15:36:16 · 2911 阅读 · 0 评论 -
CSS3实现雪碧图动画
CSS3实现雪碧图动画注意几点:steps(22) 是关键哦关键帧只需设置0%(background-position:0 0;),100%(background-position:-2200px 0;)动画均匀地分22段执行,每次都有固定相等的偏移量雪碧图由22张图片拼成的雪碧图的宽度是设置动画盒子的22倍以下CSS:.test{ wi原创 2016-03-24 15:55:39 · 6025 阅读 · 0 评论 -
微信中的video属性设置
<video id="videoID" src="video.mp4" poster="loadbg.jpg" preload="auto" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="原创 2017-03-14 17:56:20 · 33095 阅读 · 0 评论 -
小程序单位:rpx、rem的具体使用方法及算法
小程序单位:rpx、rem的具体使用方法及算法1)rpx:不论哪个型号的手机,屏幕宽度都是750rpxrpx与px的转换,根据设计稿换算例如:设计稿750px宽度,ps上量出宽度是多少,那么就定义多少rpx,也就是,1px = 1rpx例如:设计稿640px宽度,那么需要转换一下,1px = 750/640rpx2)rem:根据设计稿换算例如:设计稿750px宽度,那么1r原创 2017-05-11 18:21:50 · 2744 阅读 · 0 评论 -
SVG动画vivus.js库使用
SVG动画vivus.js库使用整理使用方法如图:HTML例子代码:vivus.js - test svg * {fill: none;stroke: currentColor;stroke-width:4;} .sunrise {color: #f037a5; background-color: #f8c72c;} .matrix {color: #原创 2016-12-26 09:18:24 · 6789 阅读 · 0 评论 -
图片CSS模糊滤镜浏览器兼容解决方法
之前做过移动端页面,要求一些图片模糊,但安卓不支持CSS模糊滤镜,找了很多方法,最后找到SVG滤镜能够很好的解决此问题,以下给出应用方法:中filter="url(#blur)"对应 的id值原创 2016-06-03 14:05:09 · 3638 阅读 · 0 评论 -
检测浏览器对HTML5属性的支持度
由于各浏览器对HTML5属性的支持度不同,这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性,例:如果要检测pattern属性是否被浏览器识别,可以使用Javascript代码来检测。alert( 'pattern' in document.createElement('input') ) // boolean; if (!'pattern' in原创 2016-06-01 15:23:09 · 1324 阅读 · 0 评论 -
音频、视频播放时属性、事件等操作
音频、视频 具有的方法/属性/事件(几个常用示例)<audio id="media" loop autoplay src="public/img/music.mp3"></audio><video id="media" webkit-playsinline="true" src="media.mp4" preload="au原创 2015-12-07 13:58:22 · 1979 阅读 · 0 评论 -
切换CSS实现开/关按钮切换
切换CSS实现开/关按钮切换 *{ margin:0px; padding:0px; box-sizing:border-box;} body{ font-family:"微软雅黑","Microsoft YaHei"; font-size:14px; line-height:24px; color:#666;} li{ list-style:none;原创 2015-12-28 11:41:26 · 2693 阅读 · 0 评论 -
切换CSS实现伸展菜单效果
切换CSS实现伸展菜单效果效果截图 资源CSS样式@charset "utf-8";@media screen and (min-width:320px) and (max-width:359px){html{font-size:12px;}body{ font-size:1.2rem;}}@media screen and (m原创 2016-02-03 18:01:55 · 1776 阅读 · 0 评论 -
CSS3动画、过渡结束后触发执行的事件
CSS3动画、过渡结束后触发执行的事件,有些时候需要在动画或过渡效果结束后执行相应操作,那么可以这样://过渡结束后执行$('.test').on('transitionend webkitTransitionEnd',function(e){ alert(e.type);});//取消过渡结束后执行$('.test').unbind('transitionend ').un...原创 2016-03-24 15:27:24 · 7746 阅读 · 0 评论 -
HTML+CSS 实现环形比例图效果
HMTL代码<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>百分比</title><style type="text/css">.yuan{...原创 2016-02-17 16:33:38 · 17855 阅读 · 0 评论 -
IOS自动播放音频/视频
ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。对于背景音乐,又必须加载的时候就要执行,解决方法:(不过注意只能在微信浏览器里面打开) document.addEventListener("WeixinJSBridgeReady", function () { Weixin...原创 2015-12-21 16:59:36 · 4844 阅读 · 0 评论 -
微信WeixinJSBridge API
微信WeixinJSBridge API来源:http://www.oschina.net/code/snippet_1399261_37142代码片段:微信WeixinJSBridge APIinput , a{ display:block; width:100%; margin-bottom:5px;} 企业微信小助手转载 2016-01-15 11:45:45 · 5254 阅读 · 0 评论 -
HTML5之canvas剪切图片
有时UI设计效果图,设定图片某个角不可见,但上传的图片又不全是PNG透明图,那么Canvas就能帮忙解决困扰啦,自己根据需求做的一个实例,实现这样的效果原创 2015-12-17 13:58:46 · 2551 阅读 · 1 评论 -
safari中overflow:hidden对CSS模糊滤镜溢出隐藏无效解决办法
最近发现safari中overflow:hidden对CSS模糊滤镜溢出隐藏无效,经测试,也可以用SVG模糊滤镜代替CSS模糊滤镜,说明safari浏览器中overflow:hidden对SVG模糊滤镜溢出隐藏是有效的解决方法示例:原创 2016-06-12 18:03:21 · 4978 阅读 · 0 评论 -
CSS3 Filter兼容性表
CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解CSS3 Filter兼容性表SVG effect for HTML兼容性表转载 2016-06-16 10:27:27 · 6819 阅读 · 0 评论