公司项目需求，要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。于是找了一下相关文章，稍微学习了一下。实现效果如下图。 拖拽实现 主要用到的是H5自带的拖拽效...

Android平台提前注入5+ API，支持在plusready事件前调用 在5+ Runtime环境中，通常情况下需要html页面解析完成后才会注入5+ API，执行的顺序为： 1. 加载html页面 2. 解析html页面（下载script/lin...

最近做项目，遇到一个问题，在手机上要实现视频的全屏播放功能。测试了很久，终于找到解决办法。 第一种：将视频放大来控制。 视频在播放的时候，全屏是根据高度来的，如果设...

本文主要记录 canvas 在图像、文字处理、离屏技术和放大镜特效的实现过程中使用到的API。先看下效果吧： 一张模糊的图片： 鼠标点击任意位置，产生放大效果： 哇塞~ 一个帅哥，哈哈...

【一、前言】 HTML5 特性，包括原生音频和视频支持而无需 Flash。 HTML5 audio 和 video 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用...

今天团队同事接到一个需求，需求是这样的，点击页面按钮弹出红包弹窗，显示黑色遮罩层，点击遮罩层背景和弹窗关闭按钮要关闭弹窗，于是我就做了一个Demo出来，方便以后下次自己...

HTML5单选框、复选框、下拉菜单、文本域 单选框的实例代码，代码如下所示： 1单选框代码： input type=radio name= id= input type=radio name= id= input type=radio name= id= 效果： 复选框 2复选框代码：...

本篇介绍如何使用 Bootstrap File Input（最好用的文件上传组件）来进行图片的展示、上传，以及如何在服务器端进行文件保存。 一、先来看效果图吧 二、引入插件的样式和脚本 link type...

因为IOS最新版微信取消了浮窗功能，小程序后台狠毒用户反馈进入不方便了，目前公众号还支持浮窗，于是需求出来了，浮窗一个H5，在H5中一键打开小程序，阅读文档得知，微信对公众...

前言 前端实现的水印基本都是不安全的，可被破解的~.~ 水印 水印（watermark）是一种容易识别、被夹于纸内，能够透过光线穿过从而显现出各种不同阴影的技术。 实现 先创建一个 wra...

HTML5基于flash实现播放RTMP协议视频，具体代码如下所示： !doctype htmlhtmlheadmeta charset=utf-8titleVideo.js 7/titlelink href=css/video-js.min.css rel=stylesheetstylebody{background-color: #191919}.m{ width: 640px; height...

前言 电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名，其作用类似于纸质合同上的手写签名或加盖的公章。虽然电子签名多年来合法性一直遭到质疑，但其在...

用什么代码实现？不允许有白色底色产生，因为手机高度不一样 设计图要标准（750）确认是背景图（通屏底图）应用场景：移动端宣传页面或者活动页面 错误的写法：加到div中结合图...

本文主要介绍了如何使用canvas绘制可移动网格的示例代码，分享给大家，具体如下： 效果 说明 这个是真实项目中遇到的需求，我把它抽离出来，屏蔽了那些业务相关的东西，仅从代码...

http://html5test.com/ 视频和音频代码检测 function CheckAudio(){ var myAudio=document.createElement(audio); if(myAudio.canPlayType){ if(!=myAudio.canPlayType(audio/mpeg)){ document.write(你的浏览器支持mp3格式br/); } if(!=my...

在开发移动端时，不像开发PC端那么方便，有控制台，可以查看各种网络请求，以及打印的日志。 那么Tencent团队就开发出了一款工具，模拟PC端的控制台，可以查看打印日志以及网络请...

演示图如下： HTML代码片段： !DOCTYPE HTMLhtml head ti【出处：美国高防服务器 网络转载请说明出处】tle404/title meta charset=utf-8 / meta name=viewport content=width=device-width, initial-scale=1, user-scalable=...

为了保障信息安全，防止重大信息泄露，并且能够锁定泄露用户，需要对页面展示的图片加入当前用户信息的盲水印，即最终图片外观看起来和原图一样，但是经过解码以后可以识别出...

最近一直做关于装修的一个项目，后台功能实现很快，但是前台界面展示确实遇到不少的问题。 问题1、下拉框选择不管用，选中之后没有变。如图 当我选择其他的选项时，不发生任何...

本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕，分享给大家，具体如下： 使用方法和API 语法如下： canvasBarrage(canvas, data); 其中： canvas canvas 表示我们的 canvas 画布元素，可以直...

本文主要介绍new XMLHttpRequest()监听附件上传进度，解决优化loading长时间加载，用户等待问题 一、存在问题 经测试发现，new XMLHttpRequest()在附件上传请求中，WIFI关闭切4G上传，上传进度不...

简介 拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添...

问题记录： 20210118，记录一下一个小问题，收到来自同事的bug反馈，说我们的H5页面，在微信内置浏览器下显示有问题，然后丢了个图过来，发现里面文字很大，文字的位置也有点偏移...

情况：引入SDK 的签名不报错与调试工具生成的结果也是一模一样，但是使用hideMenuItems没有小效果，不会报错。 解决方式：把要执行的wx.hideMenuItems()放到wx.ready这里面就有生效了 wx.con...

一.列表元素 1.ul元素 ul为无序列表，各个列表项之间没有顺序级别之分，通常是并列的，排序不分先后。 语法为： ul li列表项1/li li列表项2/li li列表项3/li .../ul 例： !DOCTYPE htmlhtmlheadme...

正确的实现代码如下： !doctype htmlhtml lang=zhhead meta charset=UTF-8 title个人简历/title/headbody table width=800 border=1 align=center cellpadding=10 cellspacing=0 captionh3个人简历/h3/caption tr td colspan=5 bgcolor=#9F...

前言 利用HTML5，css，js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面，非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女...

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成...

目录 前言 九宫格背景制作 九宫格跑马灯效果制作 确定停止时间 前言 上次说过在看一些关于0代码开发平台ivx，前一段时间忙完考试最近跟着教程0代码实现一个九宫格抽奖，哈哈哈感...

最近做项目过程中，老大提了个很奇葩的要求 背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于...

不知道老网民们还记不记得这个魔性的时钟插件： 作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜...

标签云的效果在博客和网站上不难见到，它其实就是带有超链接的某些关键字，为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大，相反的就显示的小。...

业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js的设...

目录 前言 canvas基础知识 画布元素 边框的绘制 路径 绘制图片 控制转换 升级超级玛丽游戏 最后 前言 在上一篇文章中, 我们基于DOM体系构建了超级玛丽, 那么在本篇文章中我们使用can...

目录 背景 解决方法 初步想法 进一步想法 前置知识 postMessage 实现 C 页面 A 页面 总结 背景 在一个App内嵌的H5中，产品希望在页面的下放设置一个区域，里面展示运营同学通过活动搭建...

上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间. file类型的input表...

需求： 需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下： 这篇文章主要讲解三种实现方案，包括：fixed,absolute,以及css3的flex布局。 html结构如下： div class=box...

这两年我看到很多关于这方面的文章和帖子，这的确是一个非常方便的东西。但是，太多的实现还是有漏洞，残缺不全的实现，等等。 整体概念是合理的：使用 HTML 5 属性来限制可以发...

本文主要介绍了html css 图片扫描仪，分享给大家，具体如下： 效果： 这样，有抖动的： 无抖动的： 实现： 1.定义一个盒子： body div class=tu/div/body 2.基本样式，长宽背景图等等~ .tu{ w...

h5 上经常会有这样的需求： 需要在页面上加上一个悬浮图标，大致是如下图的最终实现 但是往往按照设计稿是不会遮住主体区域的，但是实际上有时候偏偏会遮挡主体区域，但是为了...

前言 这篇文章主要是介绍如何使用canvas实现分享截图， 刚开始以为通过canvas绘画分享图片并不难，但实际上在开发的时候还是遇到非常多的坑 例如： ①图片背景为透明 ②分享图只有...

今天我们就使用canvas来实现雪花飘落的效果 一、canvas是什么？ HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. canvas 标签只是图形容器，您必须使用脚本来绘制图形。...

目标：利用html+css实现鼠标移到菜单栏时，菜单栏会缓慢出现的效果 我们可以用两种方法来解决这个问题 方法一：过渡（transition） 对forum-1开启 绝对定位 (absolute)，让里面的 li 从其父...

业务场景： 手机app端录音，然后上传至后台服务器，前端从后台服务器获取录音，在PC端WEB页面播放。 实际问题： 首先app录音文件默认是m4a格式，而在PC端WEB H5页面，audio标签并没有明...

3D是three-dimensional的缩写，就是三维图形。在计算机里显示3D图形，就是说在平面里显示三维图形。不像现实世界里，真实的三维空间，有真实的距离空间。计算机里只是看起来很像真实...

效果图 代码 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1.0 title水印遮罩/title/headstyle .watermark_mask { position:...

在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲...

手机HTML5开发，大部分都使用现有的框架，这里简单比较几个流行的UI框架。作者比较一下几款流行的HTML5框架，个人意见，仅供参考。 （1）MUI 网址：http://dev.dcloud.net.cn/mui/ 优点：MUI是...

跟随鼠标炫彩小球 canvas没有让我失望，真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色，随机半径 鼠标移动通过实例化，新增小球 通过调用给原型新增的方...

一、背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议...