前端开发

Html5 滚动穿透的方法

Html5 滚动穿透的方法

问题背景:网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案在H5中使用的列表采用的是 react-virtualized 来绘制表格为了展示表格中单行数据的具体详情,通常的解决方案是采用新页面或者是弹窗来完成。因为弹窗时设置position为fixed后,html页面的 scrollTop 值会变成0,会回到页面顶部,所以在关闭弹窗后,需要手动设置h... »

基于Html5实现的语音搜索功能

细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势,下面就介绍一下如何实现此功能,代码如下: <input type="text" name="test" x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIlti... »

深入理解HTML5定时器requestAnimationFrame的使用

特点 requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量。但需要注意的是requestAnimationFrame 不管理回调函数,即在回调被执行前,多次... »

移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法

H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验。-webkit-tap-highlight-color:transparent; *GitHub:Fuck me on GitHub Fuck me on GitHub总结以上所述是小编给大家介绍的移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法 ,希望对大家有所帮助,如果大家有任何疑问请给我... »

HTML5新标签兼容—— !–if lt IE 9!endif– 的两种方法

-- 的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持! »

html5默认气泡修改的代码详解

html5默认气泡修改 默认的浏览器气泡样式: 谷歌浏览器     火狐浏览器     IE浏览器     在谷歌29版本之前可以使用伪元素进行修改: ::-webkit-validation-bubble 不过已被废弃!!! 新的解决方案: 效果图:     <!DOCTYPE html> <htm... »

canvas简单连线动画的实现代码

前言:canvas动画入门系列之简单连线动画。虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通。 step1:绘制点 首先创建个标签<canvas id="canvas"></canvas> 设置几个点的坐标 const points = [ [200, 100], //上 [300, 200], //右 [100, 200], //左... »

Html5获取高德地图定位天气的方法

注:使用的是的模块注入方式,适用各种前端单页面应用及H5 创建一个AMap.js文件 // AMap.js // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key export default function MapLoader () { return new Promise((resolve, reject) =>... »

web字体加载方案优化小结

font-display为了解决这种,CSS Fonts Module Level 3 中添加了一个 font-display 属性,这个属性可以让浏览器立即使用备用字体,在web字体加载完成之后立即替换,并重新渲染。以上两种方案都是新方案,会有一些兼容性,除此之外,还可以使用AJAX加载字体,再转换为base64的方式来实现字体加载过程的监听。 »

基于HTML5代码实现折叠菜单附源码下载

基于html5代码实现折叠菜单附源码下载。效果图如下所示,喜欢的亲们还可以下载源码哦! »

css sticky footer经典布局的实现

什么是sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。是不是很容易理解。不理解的小伙伴也没关系下面我就举个简... »

CSS3制作漂亮的照片墙的实现代码

CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们首先放十张图片在页面上面。(有什么靓照尽管上来哦!) XML/HTML Code复制内容到剪贴板 <div class="content"> &nb... »

canvas如何实现多张图片编辑的图片编辑器

下面,我将在我曾经写过的一个canvas涂鸦的基础上,将多张图片编辑器的开发和思考过程记录下来。那是因为canva具有许多html元素不具备的特点,例如可以在canvas上画图,画线条等等操作,而且canvas直接提供api可以将画布上展示的内容导成图片。到目前为止,无论是base64直接转成blob,还是canvas直接转成blob,最后目的都是为了将blob数据上传到服务器。 »

html5手机键盘弹出收起的处理

前言:前端时间也是应项目的需求开始了h5移动端的折腾之旅,在目前中台的基础上扩展了两个ToC移动端项目,下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。在 h5 中目前没有接口可以直接监听键盘事件,但我们可以通过分析键盘弹出、收起的触发过程及表现形式,来判断键盘是弹出还是收起的状态。 »

鼠标滚轮事件和Mac触控板双指事件

因为下一阶段要做的一个工作是开发一个WEB端的K线图,所以这一周一直在研究这方面的东西,其中涉及到的一个知识点是鼠标滚轮事件和Mac的触控板双指事件,发现这里面还是有一些坑的。 1. 用哪个事件 The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). T... »

HTML5 Blob 实现文件下载功能的示例代码

原理其实很简单,就是将文本或者JS字符串信息(即后台返回来的在服务器上没有具体路径的动态文件,如导出数据功能)借助Blob转换成二进制,然后,作为 a 标签的 href 属性,配合download属性,实现下载功能,缺点是如果文件太大会下载失败。 下面是导出数据的一个实例: $("#exportAll").on("click",function(){ //点... »

简单介绍HTML5中audio标签的使用

在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放。解决方案:使用三种文件类型和标签鉴于目前的状况,您可能认为目前还不是在 HTML5 页面上使用音频的黄金时刻。使用HTML5 标准和浏览器支持,开发人员可以相信用户将拥有与 HTML5 音频类似的体验,因为浏览器控件是类似的。 »

解决CSS浏览器兼容性问题的4种方案

前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)…… 关键... »

使用css transition属性实现一个带动画显隐的微信小程序部件

我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation  API来创建动画。 接下来我带各位小伙伴如何让 transition 属性在这种需求中好使起来,下面上代码 page({ da... »

HTML5表单验证特性(知识点小结)

前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持 解决方案: 可以在date上面覆盖一个div,填写placeholder的内容 html5表单新增的类型: email url range number date(date, month, week, time, dateti... »

canvas实现烟花的示例代码

index.tsx就是组件了,绘制了canvas,并执行了动画。1 : 2); } } drawDot }Firework生成随机的hsl颜色,hsl;Firework每次上升的距离是一个递减的过程,我们初始设置一个上升的距离,之后每次绘制的时候,这个距离减gravity,当距离小于零的时候,说明该出现烟花绽放的动画了。 »

HTML5 Canvas 实现K线图的示例代码

因为公司的项目需求,需要做一个K线图,可以让交易者清楚的看到某一交易品种在各个时间段内的报价,以及当前的实时报价。 我所考虑的有两个方向,一是类似于Highcharts等插件的实现方式 — svg,一是HTML5的canvas。 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 &n... »

如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。 pre去掉滚动条 pre显示文本内容时是不会自动换行的,此时可以添加一些CSS来解决: <pre>ourjs this is very very very very very very very very very ve... »

详解HTML5中的manifest缓存使用

起源html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的,比如对于 《ecmascript合集》这样的为阅读而生的页面。 html5便引入了cache manifest 文件。那么... »

css样式层叠规则详解

CSS样式规则语法样式是CSS的基本单位,每个样式规则都是由选择器和声明块两个基本部分组成的。 选择器(selector)决定为哪些元素应用样式; 声明块定义相应的样式,它包含在一对花括号内,有一条或多条声明组成,而每一条声明则由一个属性和一个值组成,中间用冒号隔开。 语法: 属性名1: 属性值1; 属性名2: 属性值2; 属性名3: 属性值3; 1.找到应用给每个元素和属性的所有声明 浏览器在 ... »

Page 1 of 2366123»