首页 HTML5

HTML5

  • html5 移动端视频video的android兼容(去除播放控件、全屏)

    html5 移动端视频video的android兼容(去除播放控件、全屏)

    android下html5的视频播放一直是前端兼容的重灾区,各种体验差,被诟病已久。但之前的故宫穿越H5,和吴亦凡入伍H5,利用的视频技术,貌似又给人一种新面貌。 前段时间做某项目,恰好也是一个类似视频全屏的,下面跟大家分享下经历的坑和填坑的办法。 ios端问题其实没什么,基本都在android端,基本每一个带有视频的项目都会遇到的,当然有特殊需求的产生的情况另说了就,问题主要有几个方面: 全屏处理; 自动播放; 播放控制; 隐藏播放控件; video全屏的处理...

    HTML5 2020-03-30 11 0
  • HTML5 Canvas实现放大镜效果示例

    HTML5 Canvas实现放大镜效果示例

    图片放大镜效果 在线源码预览 源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id="canvas" width="500" height="500"> </canvas> <img src="image.png" style="display: none&q...

    HTML5 2020-03-30 8 0
  • HTML5 图片预加载的示例代码

    HTML5 图片预加载的示例代码

    在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下: var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src = "images/01.jpg"; context.drawImage(image, 0, 0);...

    HTML5 2020-03-30 6 0
  • html5视频常用API接口的实战示例

    html5视频常用API接口的实战示例

    一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性) 属性 值 功能描述 controls controls 是否显示播放控件...

    HTML5 2020-03-30 9 0
  • html5实现滑块功能之type=&quot;range&quot;属性

    html5实现滑块功能之type=&quot;range&quot;属性

    html5实现滑块功能之type="range"属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。 2.感觉挺有意思,就做了一个关于滑块的动画的例子,可以通过开始和结束按钮来控制滑块的滑动和停止,有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。 3.具体代码如下所示 <!DOCTYPE html> <html> <head> <title>数字递增组件<...

    HTML5 2020-03-30 7 0
  • Html5页面上如何禁止手机虚拟键盘弹出

    Html5页面上如何禁止手机虚拟键盘弹出

    工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句document.activeElement.blur() 。 readonly 使用readonly方式来阻止虚拟键盘弹出应该是最简单最优雅的方式了。readonly 属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用 tab...

    HTML5 2020-03-30 7 0
  • 使用placeholder属性设置input文本框的提示信息

    使用placeholder属性设置input文本框的提示信息

    实例 带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> &l...

    HTML5 2020-03-30 8 0
  • Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

    Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

    本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端 移动端 代码 <!DOCTYPE html> <html> <head> <title>左侧导航</title> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jq...

    HTML5 2020-03-30 9 0
  • canvas如何实现多张图片编辑的图片编辑器

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

    前言 图片编辑器虽然是图片涂鸦工具,但是在当前疫情的大背景下,该工具还可以成为老师在线修改学生提交的家庭作业的工具使用的,它可以极大地减轻了老师的批改作业的工作负担,相信这软件是有市场的。 本次不具体介绍canvas的各种操作画布的api,而且相信大家在网上能搜到大量的关于canvas涂鸦的开源代码,即使是这样,我也相信真正把canvas涂鸦用于公司实际的项目的不多,改装成图片编辑器的会更少,而用于多张图片编辑然后多张统一保存、上传的更是寥寥无几。下面,我将在我曾经写过的一个canvas涂鸦的基础上,将多张图片...

    HTML5 2020-03-30 5 0
  • HTML如何让IMG自动适应DIV容器大小的实现方法

    HTML如何让IMG自动适应DIV容器大小的实现方法

    为了让IMG自适应大小,如下我做了一个横向自适应的示例: IMG样式(横向拉伸,纵向自动匹配大小) DIV样式(元素居中显示) IMG样式 (横向拉伸,纵向自动匹配大小) width:100%; height:auto; (纵向拉伸,横向自动匹配大小) width:auto; height:100%; DIV样式(元素居中显示) display:flex; align-items:center; jus...

    HTML5 2020-03-30 6 0
  • Html5 video标签视频的最佳实践

    Html5 video标签视频的最佳实践

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。 video的属性 <video id="video" src="video.mp4" controls = "true" poster="images.jpg" /*视频封面*/ preload="...

    HTML5 2020-03-30 4 0
  • 关于解决iframe标签嵌套问题的解决方法

    关于解决iframe标签嵌套问题的解决方法

    问题描述 当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点是否存在 if ($("#tabs").tabs("exists",node.text)){ //如果存在就直接选中 $("#tabs&qu...

    HTML5 2020-03-30 4 0
  • html5 datalist 选中option选项后的触发事件

    html5 datalist 选中option选项后的触发事件

    使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 <!DOCTYPE HTML> <html> <body> <script src="./jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <script...

    HTML5 2020-03-30 4 0
  • HTML5表单验证特性(知识点小结)

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

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

    HTML5 2020-03-30 3 0
  • html5默认气泡修改的代码详解

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

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

    HTML5 2020-03-30 2 0
1 2 3 4 5 ››