展开菜单

IE9浏览器对CSS3的支持情况参考

以下整理的IE9对CSS3支持情况仅限初期发布的IE9版本,其余版本由于改进或修复的原因,可能已经支持之前不支持的CSS3属性,所以以下数据仅供参考。 更准确的支持情况请访问:https://docs.microsoft.com/en-us/previous-versions//cc351024(v=vs.85) IE9对CSS3属性的支持情况: CSS3属性 IE9支持情况 之前版本IE支持情况 ...

webkit浏览器HTML5 video标签视频自动播放autoplay的问题

出于流量和电量的保护,在移动端video视频必须在用户手势操作下才能触发播放,video的自动播放属性autoplay是无效的(不涉及sdk,如微信之类)。但是在2016年webkit对视频自动播放采用了宽松的策略,这个策略其实是用来解决GIF的问题,用mp4去取代 gif,有统计显示同等效果显示,gif 体积上可能是后者的 8倍,解码耗能是后者的2倍。新的策略在 chrome for android(v53)和 safari for ios(10)以上有效,自动播放必须满足以下条件才有效: <video> 标签必须有 autoplay 的属性。 &l...

HTML5实现音频可视化频谱跳动代码插件HTML5_Audio_Visualizer

HTML5实现音频可视化频谱跳动代码插件HTML5_Audio_Visualizer

通过HTML5实现音频可视化的频谱跳动,HTML5_Audio_Visualizer插件效果预览: 插件代码: HTML代码: <canvas id="canvas" width="800" height="350"></canvas> <br/> <audio src="yourmusic.mp3" id="audio" controls>audio element not supported</audio> CSS代码: body {background: #000...

CSS实现元素垂直居中的几种方法

网页前端经常需要把元素垂直居中,下面总结几种方法。 1、不知道元素高度,利用定位和CSS属性transform实现元素垂直居中: 代码一: parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); } 代码二: parentElement{ height:xxx; } .childElement { position: relative; ...

SVG定义路径的path标签入门详细教程

SVG的<path>元素用于定义一些复杂的图形。它可以结合使用直线,曲线等来制作各种不规则的图形。<path>元素是SVG基本图形中最为复杂的一个。要掌握和理解它也需要下一点苦工。 先来看一个例子: <svg xmlns="http://www.w3.org/2000/svg"> <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,110 L100,0" style="stroke:#660000; fill:none;"/> </svg> ...

html input文本框禁止输入的几种方法

readonly:可以获取本文框的值 <input type="text" readonly="true" value="abc"/> disabled:不能获取本文框的值 <input type="text" value="bcd" disabled="disabled" /> maxlength:定义文本框的文本长度为0个字符 <input type="text" value="" maxlength="0" /> blur:禁止文本框获取焦点 <input type="text" onfoc...

keyCode事件属性event.keycode值大全

keyCode 属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。那么window.event.keyCode == 8的js代码是什么意思?其实就是判断事件按下的是否为 BackSpace 键。 event.keycode值大全: 的 keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter ...

jQuery判断访问的电脑浏览器还是手机浏览器

以下代码用于JQuery判断访问的浏览器的类型 $(function(){ var mobile_flag = isMobile(); // true为PC端,false为手机端 if(mobile_flag){ alert('PC端'); }else{ alert('手机端'); } }); function isMobile() { var userAgentInfo = navigator.userAgent; var mobileAgents = [ 'Android', 'iPhone', 'SymbianOS', 'W...

jquery实现购物车增加减少购买数量的代码

代码实现的效果点击增加、减少按钮实现购买数量的变动,只允许输入数字,禁止中文、英文或其它符号的输入。 HTML代码: <div class="buyNum"> <a id="sub" href="javascript:void(0);">-</a> <input type="text" value="1" id="booknum" class="num"/> <a id="add" href="javascript:void(0);">+</a> </div> ...

input多图上传并即时显示的代码

以下代码经过Firefox、Chrome浏览器测试没有问题,其余浏览器未作测试。 HTML代码: <div id="billList"> </div> <div class="uploadBtn"> <div class="btn"> <p>点击上传</p> <p>票据凭证</p> </div> <input type="file" id="bill" multiple="multiple" accept="....

type="file"的input上传图片实时显示javascript代码

javascript函数代码: function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); console.log(fr); var portrait = document.getElementById('avatar'); fr.onloadend = function(e) { portrait.src = e.target.result; }; fr.r...