HTML5
关注
分享
扫一扫
#麻辣小龙虾#
路漫漫其修远兮，吾将上下而求索。
展开
-
H5实现下拉刷新
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H5下拉刷新</title> <style> *{margin:0;padding:0;} #f...原创 2020-05-15 16:24:54 · 3582 阅读 · 0 评论 -
P标签里面为什么不能添加div标签
很多刚接触html的同学可能比较少注意到这个问题，html标签里面是不是可以随便放标签，答案是肯定不行的。为什么呢？ 我们先看一张图代码图然后浏览器渲染出来的DOM是这样的 本人使用的浏览器是chrome 看到区别了么，命名我们已经将p标签包裹在div外面了，为什么他们跑出来了呢？HTML写一个div就可以布局玩所有页面，但是为什么要有那么标签，那是因为每个标签都有每个...原创 2018-05-18 18:35:51 · 3574 阅读 · 3 评论 -
原生javascript实现H5拖拽效果。
一、设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true 二、 ondragstart 和 setData()当元素被拖动时，事件触发，所调用的函数。上面例子代码中，ondragstart 属性调用了一个函数，drag(event)，规定被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：functio...原创 2018-07-17 14:01:46 · 2369 阅读 · 1 评论 -
H5 Notification桌面推送消息
三、HTML5 Web Notification语法window.Notification 如果浏览器支持Web Notification，不考虑私有前缀，则window.Notification就会是一个有很多静态属性和实例方法的函数。基本上，Web Notification所有的语法都是围绕Notification这个函数来进行的。显然，通知这种事情是有可能扰民的，因此，必须经过用户...原创 2018-07-18 00:09:29 · 2645 阅读 · 1 评论 -
HTML5本地存储indexDB新建数据库、数据库增删改查操作
代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minim原创 2018-07-15 01:04:13 · 3325 阅读 · 1 评论 -
H5 input新增type属性color颜色拾取器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2018-08-27 10:07:31 · 4156 阅读 · 1 评论 -
html5 Audio 对象
最终效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2019-02-26 10:00:16 · 280 阅读 · 0 评论 -
HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-03-18 16:26:47 · 2867 阅读 · 0 评论 -
H5移动端rem布局还原750px设计稿方案。
引入对应的脚本:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scal...原创 2019-05-23 10:07:32 · 7111 阅读 · 1 评论 -
HTML5 Canvas 实现刮奖效果
最近有在看canvas的一些东西，以前在手机端看过有些活动页面可以实现在手机端刮奖效果，就类似刮彩票显示中奖的效果，然后自己想了一下要怎么实现。实现原理是用canvas遮挡住中奖的结果，然后再原来的canvas层绘制透明效果让底部的中奖结果实显示出来。具体主要的canvas api如下：详情参考：canvas API关键参数是这个 globalCompositeOpera...原创 2019-07-07 16:03:32 · 1465 阅读 · 0 评论 -
A中的标签download属性，你知道吗？
最近无意中发现A标签竟然有个download属性，于是就琢磨了下这个属性的用法，看了下文档。才知道，如果给A标签href添加对应的图片或者文件地址，包括图片的base64地址都可以，然后在download属性设置对应的下载名称就可以下载图片了，这个属性可以作为直接点击下载图片，就不用用户再次点击右键保存了，还是有一定的用处。...原创 2019-07-17 23:00:42 · 1865 阅读 · 0 评论 -
H5 canvas绘框选实现截图和保存截图代码
代码如下：<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>H5 canvas绘制框选截图和保存截图代码</title> <style> *{pad...原创 2019-09-20 14:45:52 · 1440 阅读 · 0 评论 -
H5仿QQ消息滑动删除置顶效果
闲来无事，看到QQ消息里面的滑动删除置顶效果，于是就想了一下自己用H5要怎么实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2018-04-06 10:39:46 · 1585 阅读 · 1 评论 -
H5移动端手势滑动圆盘转动效果
<!doctype html><html><head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewpor原创 2018-04-04 00:37:53 · 4382 阅读 · 2 评论 -
H5实现开关选择切换效果
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-sc原创 2018-04-03 00:14:56 · 8193 阅读 · 4 评论 -
Vuejs结合html5 localstorage本地缓存开发webapp项目源码
Vuejs结合html5 localstorage本地缓存开发webapp项目源码，项目可以记录每次存储的数据，并统计历史记录、本月记录、最高记录等等。点击在线预览github仓库地址：https://github.com/zhongyoucong/app/tree/master/app2.0苹果端可以保存到桌面，效果图如下： js代码//日期格式化函数Date.prototype.fo原创 2017-05-25 23:06:49 · 1913 阅读 · 1 评论 -
html5 localstorage结合vue开发本地记事本项目源码
html5 localstorage结合vue开发本地记事本项目源码github仓库地址：https://github.com/zhongyoucong/app/tree/master/app1.0点击在线预览效果图如下： js代码//日期格式化函数Date.prototype.format = function(fmt) { var o = { "M+": this.g原创 2017-05-25 23:12:39 · 1081 阅读 · 0 评论 -
H5移动端实现仿QQ空间照片上传效果代码
最近在做项目的时候需要实现一个手机端上传图片效果，但是本来想用H5 的 multiple属性进行一次性多图上传，无奈安卓系统兼容性硬伤，暂时找不到兼容安卓网页版的多图上传方案，于是就仿了QQ空间网页版的图片上传效果。代码如下：效果图：javascript部分： //获取文件url function createObje原创 2017-08-01 18:00:55 · 6058 阅读 · 5 评论 -
原生javascript实现鼠标在窗口按下拖动，元素放大效果。
代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg原创 2017-08-26 20:13:25 · 1244 阅读 · 0 评论 -
form表单中autocomplete 有什么用？
定义：在做项目的时候你会发现，当你在表单输入值提交之后，页面刷新载入的时候，你再次输入的时候会出现如s上的情况，表单下面有类似你以前输入过的东西，这就autocomplete = “on”的状态，但是在开发过程中，有时候并不需要设置提示。那么久可以关掉就好，将autocomplete = “off”。如果支队单个表单设置，那么只会对单个表单启作用，如果是对form表单设置，那么则对form里面的所有原创 2017-08-23 16:32:51 · 7911 阅读 · 1 评论 -
css3 animation小动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css3 animation小动画 </title> <style> .box{ height:100px; width:100px;原创 2017-09-06 15:04:01 · 651 阅读 · 0 评论 -
H5创建webApp保存到桌面。
苹果端保存到桌面代码：（注意尺寸是57x57） <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-a...原创 2018-03-13 23:06:53 · 12141 阅读 · 1 评论 -
原生javascript编写手机端H5滑动效果
主要用到touchstart 、touchmove、touchend三个函数的编写。 效果如下：**代码：**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte原创 2018-03-31 12:00:57 · 3030 阅读 · 0 评论 -
H5旋转切换动画效果代码。
闲来没事，敲敲代码也不错，，，，，，动画效果如下：具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid原创 2018-03-31 16:19:25 · 4569 阅读 · 0 评论 -
H5防QQ中的天气功能页面中的十二星座切换效果
今天用手机QQ看了下，突然看下QQ天气十二星座的切换效果，于是兴致来潮，就想了一下要怎么实现。QQ天气效果：我模拟的效果：没有在手机端去实现，手机端结合touchstart 、 touchmove 、touchend三个事件及touch[0]事件对象获取手势的坐标然后判断方向，应该也可以去实现的。我监听了键盘事件来模拟触摸事件，然后实现了类似的效果，不过向右移动的时候还是有点小...原创 2018-03-31 19:26:50 · 893 阅读 · 0 评论 -
H5手机端滑动切换效果
最近在研究H5的动画，于是简单实现了相应的手机端触摸切换画面效果，具体代码如下：最终效果： 实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&quo原创 2018-04-01 22:06:41 · 4552 阅读 · 3 评论 -
HTML5+原生javascript 卡片扑克旋转展开效果demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5+原生javascript 卡片扑克旋转展开效果demo</title> <style> *{margin:0;padding:0;} body{background:#ccc;padding-t原创 2017-03-11 11:32:20 · 1985 阅读 · 0 评论