-
html5视频自动横过来自适应页面且点击播放功能的实现
所属栏目:[MySql教程] 日期:2020-08-15 热度:106
本代码适用于1920*1080的视频,如果是其他尺寸的视频,需要更改js代码里的几个数字,重新计算视频宽高 效果图 如图所示, 在长屏手机里,横过来的视频高度充满,宽度自适应后居中; 在短屏手机里,横过来的视频宽度充满,高度自适应后居中; 代码HTML !--[详细]
-
为什么我们要从MySQL迁移到TiDB?
所属栏目:[MySql教程] 日期:2020-08-15 热度:65
【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR 【51CTO.com原创稿件】当一张百亿数据量的表放在你面前,你将面临着什么?加列?哭吧,怎么也得等个几天甚至几周。加索引?哭吧,不论你用 pt-online-schema,还是 gh-ost,你都面临着拷贝一张临时表用以[详细]
-
万字分享,我是如何一步一步监控公司MySQL的?
所属栏目:[MySql教程] 日期:2020-08-15 热度:171
写在前边 在家远程办公第三周,快被手机上的消息搞的有些神经质了,生怕错过一条有用的信息,没办法形势如此,公司摇摇欲坠大家也都如履薄冰,毕竟这时候失业有点惨( 穷怕了 )。 但就干活来说还是比较清闲的,和在公司上班相比,清闲下来很多碎片时间,[详细]
-
Html5导航栏吸顶方案原理与对比实现
所属栏目:[MySql教程] 日期:2020-06-16 热度:108
市场上享有H5导航栏吸顶效果展示 1.淘宝聚划算吸顶演示: 2.淘宝百亿补贴吸顶演示: 二. 常见的tabbar吸顶方案 基于position粘性定位的吸顶方案 基于JS监听scroll事件的吸顶方案 三. 方案的原理与对比 1. position粘性方案的实现与详解 1.1. 知识详解 posi[详细]
-
浅析图片上传及canvas压缩的流程
所属栏目:[MySql教程] 日期:2020-06-16 热度:106
我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。 本文在gitthub做了收录:github.com/Michae[详细]
-
原生canvas制作画图小工具的踩坑和爬坑
所属栏目:[MySql教程] 日期:2020-06-16 热度:55
副标题#e# 最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样 写的过程中遇到了一些坑,还好爬出来了,也得到几位大佬的指点,稍微接触了一下zrender,在这里记录一下。 坑1,绘制过程的预览 用canvas画线没什么问题[详细]
-
h5移动端调用支付宝、微信支付的实现
所属栏目:[MySql教程] 日期:2020-06-16 热度:67
公司项目之前已有支付宝支付,现要求增加微信支付,第一次做,摸着石头过河!结果是满意的。 废话就不说了直接上代码: var aliChannel = null;var wxChannel = null;// 定义支付方式切换var state_type = 1;// 选择支付方式 默认为支付宝样式$(.zfb).find[详细]
-
使用SVG实现提示框功能的示例代码
所属栏目:[MySql教程] 日期:2020-06-16 热度:125
副标题#e# NO.1 前言 Tooltips常被称为提示框(或信息提示框),提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用于不同的场景。 NO.2[详细]
-
Html5嵌入钉钉的实现示例
所属栏目:[MySql教程] 日期:2020-06-16 热度:113
1,需要在项目种引入钉钉官方的js script type=text/javascript src=http://www.jb51.net/html5/http:/g.alicdn.com/dingding/dingtalk-jsapi/2.3.0/dingtalk.open.js /script 或者npm 也可以的 2,钉钉自带的api,有写是需要鉴权的,所以在使用之前一定要[详细]
-
HTML5页面无缝闪开的问题及解决方案
所属栏目:[MySql教程] 日期:2020-06-16 热度:76
副标题#e# 在传统的 web 优化中,我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小,也能通过离线包、页面直出等方案加速 html 返回,之前一篇h5 秒开大全有部分简析。在大部分场景中,这些方案都足够用,也能得到出色的效果。但仍有两种无法尽善尽[详细]
-
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
所属栏目:[MySql教程] 日期:2020-06-16 热度:176
一、通常我们在存储数据的方式有三种 cookie sessionstorage localstorage ,那么这三种数据的存储又有什么关系呢?让我们一起来看看吧 cookie:保存cookie值: var dataCookie='110';document.cookie = 'token' + = +dataCookie; 获取指定名称的cookie值 f[详细]
-
h5页面唤起app如果没安装就跳转下载(iOS和Android)
所属栏目:[MySql教程] 日期:2020-06-16 热度:73
h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏[详细]
-
HTML5移动端开发遇见的东西
所属栏目:[MySql教程] 日期:2020-05-12 热度:172
副标题#e# !-- 有# *符号输入 --input type=tel!-- 纯数字 --input pattern=d* 安卓跟IOS的表现形式应该不一样,大家可以自己试试。当运用了正则pattern后,就不用关注input的类型了。 2. 调用系统的某些功能 !-- 拨号 --a href=http://www.jb51.net/html5[详细]
-
基于 HTML5 WebGL 实现的垃圾分类系统
所属栏目:[MySql教程] 日期:2020-05-12 热度:165
副标题#e# 垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众[详细]
-
HTML5实现的震撼3D焦点图动画的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:139
这是一款基于HTML5和jQuery的3D焦点图动画,焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果,从而让图片出现3D的视觉效果。这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便。如果你需要在网站中展示产品[详细]
-
HTML5 Canvas 破碎重组的视频特效的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:125
也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎[详细]
-
前端canvas水印快速制作(附完整代码)
所属栏目:[MySql教程] 日期:2020-05-12 热度:130
原理解析: 图一斜纹类:创建一个和页面一样大的画布,根据页面大小以及倾斜角度大致铺满水印文字,最后转化为一张图片设为背景 图二倾斜类:将文字倾斜后转化为图片,然后设置背景图片repeat填充整个页面 代码分析: 这里我只简略分析图一斜纹类,事实上[详细]
-
canvas实现圆绘制的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:193
语法:arc(x, y, radius, startAngle, endAngle, anticlockwise) 前面两个参数是x坐标,y坐标,第三个参数是半径,第四个参数是开始的弧度,第五个参数是结束的弧度,第六个参数是顺时针还是逆时针,默认是顺时针。 看下面代码,这样就能绘制一个圆了。 ct[详细]
-
Html5 Canvas 实现一个“刮刮乐”游戏
所属栏目:[MySql教程] 日期:2020-05-12 热度:74
副标题#e# 话不多说,先上Demo 和 项目源码 . 2. 实现 我们创建一个 ScrapAward 类,通过传入 option 和调用其 restart() 方法实现重新开始。 (1)定义 option 参数及 ScrapAward 结构 class ScrapAward {constructor(userOption) {this.option = {canvasI[详细]
-
详解基于 Canvas 手撸一个六边形能力图
所属栏目:[MySql教程] 日期:2020-05-12 热度:65
副标题#e# 六边形能力图如下,由 6 个 六边形组成,每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然,你也可以基于其他开源的 js 方案来实现,如 EChars.js 等。 二、六边形绘制基础 六边形能力[详细]
-
html+css实现自定义图片上传按钮功能
所属栏目:[MySql教程] 日期:2020-05-12 热度:94
普通的input[type=file]的效果很朴素 可以自定义一个file选择文件的按钮: 思路为: 用定位将自定义的按钮遮住原来的选择文件按钮, 再让点击自定义按钮时触发原来的选择文件按钮的事件即可 (对此,label可实现) eg: html: css样式: 结果图: 点击选择[详细]
-
分享一个页面平滑滚动小技巧(推荐)
所属栏目:[MySql教程] 日期:2020-05-12 热度:120
今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。 简单的处理了一下, 问题顺利解决, 就把这个小技巧分享一下给大家。 正文 有几种不[详细]
-
分享一个H5原生form表单的checkbox特效代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:73
!DOCTYPE htmlhtmlhead meta charset=UTF-8 title/title style.md-checkbox {margin: 50px;position: relative;height: auto;font-size: 14px;}.md-checkbox labelspan.inc {-webkit-animation: growCircle 0.2s ease;-moz-animation: growCircle 0.2s eas[详细]
-
canvas基础之图形验证码的示例
所属栏目:[MySql教程] 日期:2020-05-12 热度:84
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。 验证码一般用PHP和java等后端语言编写; 但是在前端,用canva或者SVG也可以绘制验证码; 直接上干货: !DOCTYPE htmlhtmlhea[详细]
-
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
所属栏目:[MySql教程] 日期:2020-05-12 热度:172
最新因项目需要,就利用HTML5+css3+jquery+weui做了一个仿微信聊天界面功能,可以发微信表情,查看图片、视频... 由于代码较长,小编打包了。需要的朋友点击下载。 具体代码如下所示: 总结 以上所述是小编给大家介绍的利用HTML5+css3+jquery+weui实现仿微[详细]