前端开发

微信小程序实现可实时改变转速的css3旋转动画实例代码

前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。实现可以实时修改转速微信小程序里涉及到实时数据就避免不了Page.data这个东西。答案是肯定的,但是不是去把动画时间改为0,而是采用了css3动画的一个属性。 »

HTML利用九宫格原理进行网页布局

比如小米商城局部布局如下:不难发现,一些电商平台的布局基本上大同小异,最普遍的还是这种九宫格布局。下面我们来说一下九宫格布局的原理。 »

Html5定位终极解决方案

背景 到新公司的第二个项目,就是和小伙伴们一起做一个H5的商城,主要在微信内,但也要考虑到其他浏览器。其中,首页需要根据当前用户的经纬度找到距离最近的门店并展示。前端需要做的工作就是获取用户的经纬度然后查询后台接口并渲染页面。 目标与分析 我们的目标是经过封装之后,只需要调用一个方法就可以拿到返回的位置信息。 我们需要做的事情是,针对不同的端(微信H5和其他浏览器环境)封装不同的类,再通过一个方法... »

HTML5中外部浏览器唤起微信分享

最近在做一个手机站,要求点击分享可以直接打开微信分享出去。也找了很多都不能直接唤起微信。适应手机qq浏览器和uc浏览器。/** * 此插件主要作用是在UC和QQ两个主流浏览器 * 上面触发微信分享到朋友圈或发送给朋友的功能 */'use strict';var UA = navigator.appVersion; /** * 是否是 UC 浏览器 */var uc = UA.split.lengt... »

H5页面适配iPhoneX(就是那么简单)

iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。 笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前... »

HTML5 History API 实现无刷新跳转

有一次在上**网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才将这一技术应用起来。 在HTML5中, 1. 新增了通过JS在浏览器... »

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。 栗子1:从最简单的水平居中开始 margin: 0 auto; 块级元素使用margin: 0 auto;可以在父元素的中间位置居中,不过要记得设置块级元素的宽高。 HTML部分 <div class="wrap&q... »

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使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)

问题解说: 在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示   //html <div class="container"> <div class="first"> </div> </div> //les... »

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中元素的显示模式

在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素、块级元素。2.1,行内元素不会独占一行,而块级元素会独占一行;2.2,行内元素不能设置宽度和高度,它的宽度和高度会随着文本的改变而该改变。4,如何转换CSS元素的显示模式? »

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 文件。那么... »

css3 transform导致子元素固定定位变成绝对定位的方法

 本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法,分享给大家,也给我自己留个笔记,方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 } .parent { position: fixed; width: 300px... »

Page 2 of 23661234»