CSS修改表单输入框placeholder属性文字颜色

placeholer是HTML5新增属性，规定可描述输入字段预期值的简短的提示信息，IE10+、Firefox、Opera、Chrome 和 Safari 浏览器支持该属性。 针对不同浏览器修改placeholder属性样式的代码如下 input::-webkit-input-placeholder{ color:#f00; opacity:1; } input::-moz-placeholder{...
Web前端开发 / / 3615次阅读

jquery判断video视频播放或暂停的代码

javascript paused属性返回视频是否已暂停（该属性为只读属性，IE8或更早的浏览器不支持该属性），javascript play()方法用于播放音频或视频，javascript pause()方法用于暂停当前播放的音频或视频。 只判断视频是否在播放状态 HTML代码： <div class="video"> <video src="../video/video.mp...
Web前端开发 / / 29036次阅读

html5 canvas实现背景鼠标连线动态效果代码解析

很流行的动态背景连线特效。下面的代码是作者在扒下来的代码上进行整理和注释，很适应参考学习。 效果截图： 效果演示：https://jc1144096387.github.io/canvas_nest/ 作者地址：https://blog.csdn.net/u013556477/article/details/82819785 HTML代码（测试代码）: <!...
Web前端开发 / / 5739次阅读
html5 canvas实现背景鼠标连线动态效果代码解析

解决HTML5标签video视频不能播放,显示无效源的问题

视频本地播放器可以打开播放，在网页上使用video标签不能播放或显示无效源，原因是视频的编码不被video支持，解决方法是转换视频编码。 当前video标签支持Ogg、MPEG4(mp4)、WebM三种视频格式，分别支持的视频编码如下： Ogg - Theora视频编码、Vorbis音频编码 MPEG4 - H.264视频编码、AAC音频编码 Web...
Web前端开发 / / 14768次阅读
解决HTML5标签video视频不能播放,显示无效源的问题

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

出于流量和电量的保护，在移动端video视频必须在用户手势操作下才能触发播放，video的自动播放属性autoplay是无效的（不涉及sdk，如微信之类）。但是在2016年webkit对视频自动播放采用了宽松的策略，这个策略其实是用来解决GIF的问题，用mp4去取代 gif，有统计显示同等效果显示，gif 体积上可能是后者的 8倍，解码耗能是后者的2倍。新的策略在 chrome for android（v53）和 safari f...
Web前端开发 / / 8588次阅读

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,10...
Web前端开发 / / 5720次阅读

使用JS和canvas实现gif动图的停止和播放

HTML5 canvas可以读取图片信息，绘制当前图片。于是可以实现图片马赛克，模糊，色值过滤等很多图片特效。我们这里不用那么复杂，只要读取我们的图片，重绘下就可以。 HTML代码： <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testB...
Web前端开发 / / 5880次阅读
使用JS和canvas实现gif动图的停止和播放

通过HTML5 Canvas实现360度全景图

很多购物网站现在都支持360实物全景图像，可以360度任意选择查看样品，这样 对购买者来说是一个很好的消费体验，用HTML5 Canvas也可以实现类似的功能。 360度全景图的原理： 首先需要对实物拍照，间隔是每张照片旋转15度，所以需要23张照片。 照片准备好了以后，尽量选择JPG格式，裁剪到适当大小。 JAVASCRIPT中预加载所有照片，可以配合进度条显...
Web前端开发 / / 4922次阅读

HTML5实现网页图片鼠标悬停黑白变换效果

使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件。下面的示例将展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。 贡献者：感谢达西·克拉克 贡献jQuery和Javascript代码。 效果演示：http://webdesignerwall.com/demo/html5-grayscale/ 目的 这个示例的目的是向你展示如何使用HTML5和jQu...
Web前端开发 / / 5304次阅读

响应式HTML5模板制作教程

HTML5目前发展势头良好，已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时，目前基于响应式的网页设计理念也得到了广泛的认同，开发者在开发基于HTML 5的网页时，如果能创建响应式的页面，则会增色不少，特别是能适配各类移动终端。在本文中，读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。...
Web前端开发 / / 5557次阅读
响应式HTML5模板制作教程