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

业务场景：由于需求是适配两端屏幕，所以刚开始想的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）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议...

前言 基于H5的页面调通 企业微信的API （已调通demo） 一、环境 企业微信管理员 添加应用 ，地址指向H5程序的地址。（企业微信通过内部游览器访问你自己发布出来的web端的手机项目，...

前言 canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 这里我个人总结了3种实现方法，大...

介绍 HTML5 是下一代的 HTML, 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 起步 HTML5 是 W3C 与 WHATWG 合作的结果。 为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少...

作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时...

一、PDF.js的下载 从官网直接下载即可，地址：http://mozilla.github.io/pdf.js/getting_started/#download 建议下载稳定版本，如下图所示： 下载完成后将压缩包解压放在项目下，按照正常引入方式引...

前言 在一个项目中，客户提了一个发光的效果，效果图如下： 阴影 有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效【文章出处:外国服务...

在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。 方案一：使用...

我想在HTML5中存储一个JavaScript对象 localStorage ，但是我的对象显然正在转换为字符串。 我可以使用来存储和检索原始JavaScript类型和数组 localStorage ，但是对象似乎无法正常工作。应该吗...

最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是jiathis，share分享这种的点击出来二维码。在网上看了很多，都说APP能唤起微信，手机网页实现不了。也找了很多...

前言 瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是了解的很明白，来来来，那现在我给大家上一个常见的实例: 相信大家在百度上搜索图片时的时候，网页...

轮播图原理大概是这样的，假定三张图片需要做轮播效果，首先需要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从显示框走出，则将这张图片放置到最...

H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位（root em，根 em） 只根据当前页面 HTML 页面的 font-size 设置，如果根目录的 font-size 为 18px，则 1rem=18px 媒体查询设置 @...

本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件，可以兼容PC、Android和IOS环境。 H5页面可以通过video 标签来播放视频。一般的方式如下： !DOCTYPE HTMLhtmlbodyvideo src=/i/mo...

是这样的，今天玩github，先是在没有登录浏览了一些页面，然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示： 那么这是怎么做到的呢？我们可以想到，一种办...

利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码，背景为随机生成的颜色和杂乱的直线与点点。 进阶：利用表单插件属性绑定验证码数据(json)可以在发送时候或者...

最近有读者加我微信咨询这个问题： 其中的效果是一个折线路径动画效果，如下图所示： 要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来...

这里推荐两种方法，就是两个标签 embed 或者audio 常用 audio +css布局 隐藏【本文来自：由专业的香港高防服务器转发】播放器 做网站比较实用！ !DOCTYPE htmlhtmlhead titlehtml5添加音乐/title...

代码块： !DOCTYPE html html lang=zh-hans head meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titlejs仿抖罗盘时钟/title style *{ margin:0; padding...

最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析...

上午闲来无事，用html及原生js写个弹窗，供参考。 !DOCTYPE htmlhtml head meta charset=utf-8 / title/title style type=text/css body{ margin: 0px; } .zhezhao{ position: fixed; left: 0px; top: 0px; background: #000; width: 100...

项目中需要做一个数据展示用的看板，初接到任务觉得这个没有什么难度，做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。 第一：浏览器不能有横向和纵向的滚...

最近有这么一个需求，需要在手机加载一个页面的时候，自动播放音乐资源。一般情况下，这个问题也就解决了，但是要保证各种手机上表现一致，那就相当困难了，至少要费点儿周折...

最近在学习在做HTML5的项目，看了博客上html5调用摄像头拍照的文章，但各有瑕疵。于是自己查阅书籍写了一个demo，主要分三步，废话不多说上代码。 HTML代码部分： !--video用于显示媒体...

描述 今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性 定义和用法 required 属性是一个布尔属性 required 属性规定必需在提交之前填写输入字段。 如...

13年的时候做过html5录音，一个问题是保存的wav格式文件很大，当初用了一个迂回的方式，上传到服务器后调用 lame 编码器转换，但由于文件大，上传较慢。不得不说，前端技术发展真是...

下面给大家分享html5点击弹出图片，分为前台代码和js代码，具体内容如下所示： 前台代码： a href=javascript:; onclick=repeat() div id=modal_volume style=position: fixed; text-align: center; width: 100%; heig...

距HTML5标准规范制定完成并公开发布已经有好些年了，面试时也少不了要问对HTML5语义化得理解。但是在实际运用时，真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司...

前言 本次使用的是canvas.drawImage()实现截图功能, 关于api支持的dom元素、基本参数，可点击查询下面连接 CanvasRenderingContext2D.drawImage() 处理过程 我本次的需求是多人视频中对某一视频某一...

介绍 过往，电视用天线接收信号，没信号出雪花屏，刺啦刺啦作响，然后赶紧扶正想办法让他找到信号。当时电脑还经常连上小霸王打游戏，魂斗罗，超级玛丽，坦克大战。。。时间如...

前言 童年玩红白机。尤其国内的小霸王那段时光还记得么。 那个马里奥大叔还记得么。 因为特别喜欢像素风的游戏从小到大一直都是，像素风本身就是由极度简单的元素构成极度复杂...