HTML5
关注
分享
扫一扫
HTML5技术分享
皮皮冰要做大神
我离大神只差一步 哈哈哈 一起进步
展开
-
【CSS3+HTML5+JQUERY】------ 实现环形进度条实例代码-（已简单封装）
【CSS3+HTML5+JQUERY】------ 实现环形进度条并且简单封装后实例代码原创 2023-06-05 15:55:04 · 501 阅读 · 1 评论 -
【Jquery】------ Jquery实现Checkbox多选并获取值，选中全部，取消全部的实例代码展示
1.Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码1.1 展示效果图:2.2 css 样式:<style> .bottom-block-layer-div{ left: 48rem; width: 60%; color: #fff; display: inline-flex; ...原创 2021-08-04 13:26:58 · 1059 阅读 · 0 评论 -
【Jquery】------- Jquery实现左侧页面切换滑入，滑出实例代码展示
1. Jquery实现左侧页面切换滑入，滑出实例代码展示:1.1 CSS3样式: <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /***右侧窗口****/ .righ..原创 2021-08-04 09:42:24 · 1725 阅读 · 0 评论 -
【JavaScript】------ 实现JavaScript通过Click按钮、复制文字(Copy)实例
1.需要注意的是： 1.input必须不能是隐藏的 2.input框不能有disabled属性 3.input的width || height 不能为0；2.代码是最主要的核心代码 其它代码自己添加。<div><input style='opacity: 0;position: absolute;z-index:-1;' type='text' value='复制的文字'><button type='button' class='...原创 2020-08-14 10:50:56 · 373 阅读 · 0 评论 -
【JavaScript】------- Canvas 实现电子签名实例代码
1. 这个例子只是实现电子签名 如何让他符合业务 看你们的了<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" /> <title>签到</title> &...原创 2020-08-04 14:14:55 · 966 阅读 · 0 评论 -
【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)
1.html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/2.modernizr-2.8.3.min.js下载 地址：http://www.bvbcode.com/cn/l85mxwts-2868363-down3,jquery.qrcode.js 下载地址：http://www.jq22.com/jquery-info294<!DOCTYPE html><html><h...原创 2020-05-19 16:24:26 · 1123 阅读 · 1 评论 -
【CSS3】------- CSS3实现文字超出显示省略号（css与js方法）
文字超出显示省略号（css与js方法）（转载处:https://www.xuanmo.xin/details/1289）第一种给出固定宽度，结合css样式控制：overflow: hidden;//超出隐藏white-space: nowrap;//让文字不换行显示text-overflow: ellipsis;//文本超出显示省略号CSS 第二种通过js方法实现，下面例子...转载 2019-06-17 16:03:49 · 577 阅读 · 0 评论 -
【HTML5】------- JavaScript 实现网页版HTML5发送语音功能
1.浏览器实现HTML5发送语音功能(转载处:https://www.xuanmo.xin/details/1784) 这是一次后台同事让做的一个功能，但是在手机端兼容不好，Safari清一色不支持，导致后来没有用上，想看效果的伙伴可以用pc端浏览器打开模拟手机的功能查看，查看demo链接移步文章尾部。 也是借助插件实现的，插件主要做了AudioContext的一些封装...转载 2019-06-17 15:58:58 · 9766 阅读 · 8 评论 -
【HTML5】------- 图片Base64编码详解
引言 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生，本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大，不过只是希望通过一些浅显的论述，让你知道什么是图片的 base64 编码，为什么我们要用它，我们如何使用并且方便的使用它，并让你懂得如何去在前端的实际工作中运用它。什么是 base64 编码? ...转载 2019-04-15 11:44:50 · 1826 阅读 · 0 评论 -
【HTML5】------ HTML5开启电话/短信功能
<!-- 开启电话功能： --><a href="tel:123456">123456</a><!-- 开启短信功能： --><a href="sms:123456">123456</a>原创 2018-09-24 10:56:28 · 489 阅读 · 0 评论 -
【CSS3】------- background-size 的用法
background-sizeCSS属性这个background-size属性有几个预定义的值，但也可以像其它size属性一样使用数字：contain:包含，整个背景图都要被包含在元素内，没有超出的部分。 cover:覆盖，背景要覆盖元素的所有区域，不能有空白出现。 长度/百分比:数字值不管你相信与否，这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下b...转载 2018-09-17 09:57:31 · 308 阅读 · 0 评论 -
【HTML5】------- HTML5 实现网页不会被缓存
1. 页面不会被缓存 实例代码如下：< META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>< META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>< META HTTP-EQUIV=”expires” CONTENT=”Wed,...转载 2018-08-30 16:07:47 · 473 阅读 · 0 评论 -
【HTML5】------- HTML5的页面资源预加载技术(Link prefetch)加速页面加载
不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/...转载 2018-08-19 16:39:42 · 1494 阅读 · 0 评论 -
【HTML5】------- pdf 文件预览实例代码
1.如何实现pdf 文件查看实例代码：embed属性 (IE、FireFox、Chrome和Safari都正常显示) <embed src="pdf文件路径" class="col-lg-12 col-xs-12" height="800px;"></embeb>...原创 2018-08-03 21:45:26 · 1162 阅读 · 0 评论 -
【HTML5】------ HTML5实现瀑布流图片
1. 实现瀑布流图片html 实例代码如下：body,div ,p{ padding:0px; margin:0px}#content{ padding:0px; margin:0px auto;/* 左右居中 上下为0*/ width:80%;/*宽为80% */}#content .note{ column-gap:20px...原创 2018-07-29 20:05:41 · 2954 阅读 · 0 评论 -
【JavaScript】------- JavaScript 图片格式数据循环显示添加html界面上
1.图片循环显示添加html界面上 代码示例：<div id="content"> <div class="note"> </div></div> var html=""; // var data=JSON.parse(packet); var data=[ ...原创 2018-07-29 13:28:53 · 2281 阅读 · 0 评论