展开菜单

javascript实现HTML5 video视频播放暂停的简易代码

javascript实现HTML5 video视频播放暂停的简易代码

HTML标签video不使用control参数,通过自定义按钮实现视频播放暂停的代码,比较简单,适合只要播放暂停效果的需求。支持IE9+、手机浏览器。 javascript代码 function videoBtn(type, videoId, btnId){ if(type == 'play'){ var video = document.getElementById(videoId); var btn = document.getElementById(btnId); video.play(); btn.style.disp...

js cancelAnimationFrame兼容低版本浏览器(支持IE9)

与 requestAnimationFrame() 方法一样,javascript window对象的 cancelAnimationFrame() 方法同样不支持IE9及其它低版本浏览器,毕竟 cancelAnimationFrame() 方法就是用来取消 requestAnimationFrame() 动画帧的。因此兼容IE9及其它低版本浏览器的方法也差不多。 代码如下: window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || w...

javascript利用canvas lineTo结合参数方程绘制椭圆(支持IE)

javascript利用canvas lineTo结合参数方程绘制椭圆(支持IE)

目前使用canvas画布绘制椭圆形的方法有 ellipse()、 scale()、贝塞尔曲线以及 lineTo(),其中比较推荐 ellipse(),但是该方法尚未纳入标准,IE全系列浏览器都不支持,其它浏览器目前比较好。 如果想兼容IE浏览器,可以考虑使用 lineTo() 方法,但是如果要绘制的椭圆像素较大,会存在很大的效率问题,甚至浏览器崩溃,但是小又少的椭圆影响不大。 HTML代码 <canvas id="canvas"> 浏览器不支持Canvas </canvas> javascript代码 ...

js requestAnimationFrame方法兼容IE9和其它低版本浏览器的写法

js requestAnimationFrame方法兼容IE9和其它低版本浏览器的写法

IE9以下浏览器或其它低版本浏览器不支持js window对象的方法 requestAnimationFrame(),但是可以结合 setTimeout 以及各自浏览器的专属前缀实现低版本浏览器的兼容。 支持 requestAnimationFrame() 方法的浏览器 代码: window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame |...

实现IE10/IE11支持object-fit属性的插件bideo.js

实现IE10/IE11支持object-fit属性的插件bideo.js

在响应式网页开发中 object-fit 属性是极为常用的一个css属性,遗憾的是IE浏览器全系列都不支持 object-fit 属性,但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。 PS:不支持 IE9 和 Edge 插件下载:https://github.com/rishabhp/bideo.js 插件使用 HTML代码: <!-- 引入插件 --> <script src="bideo.js"></script> <!...

解决Font Awesome图标跨域引用字体导致图标不能显示的方法

网页使用 Font Awesome 字体图标时图标不能正常显示,浏览器控制台出现“@font-face 跨源请求失败。资源访问受限”的错误提示,出现该错误的原因是浏览器的同源策略机制导致。 解决方法是使用跨域资源共享(CORS)机制,跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。 例如 apache 服务器可以通过 .htaccess 文件添加: <FilesMatch ".(eot|ttf|svg|woff)"> Header set Access-Control-Allow-Origin "*" ...

站酷字库多款免费商用授权中英文字体

站酷字库多款免费商用授权中英文字体

站酷字库(ZCOOL)提供多款免费中英文字体下载,免费授权全社会使用,包括商用。 所有字体下载页面:https://www.zcool.com.cn/special/zcoolfonts/ 站酷高端黑体 2014年圣诞发布的第一款由站酷冠名的公益字体,包含了6763个汉字、数字和英文字母。字体设计师胡晓波、刘兵克在站酷网发起“汉字百人舞”的征集设计师集体造字,前后参与设计师近百人。 站酷酷黑体 在站酷十周年之际横空出世,由胡晓波发起,字游工作室成员进行基础字形设计,胡晓波设计班十名学员共同设计完成。 ...

Sublime Text 3版CSS格式化插件Sublime-CSS-Format推荐

Sublime Text 3版CSS格式化插件Sublime-CSS-Format推荐

Sublime-CSS-Format是款很不错的Sublime CSS格式化插件,可安装在Sublime Text 3版本,支持一键格式化CSS/SASS/SCSS/LESS代码,可转换为多种排版格式,如压缩、换行等,使用简单操作容易。 下载Sublime-CSS-Format格式化插件:Github Sublime编辑器菜单栏选择“Preferences->Browse Packages” 把下载的Sublime-CSS-Format插件压缩包在打开的Packages文件夹中解压,并重命名为“Sublime-CSS-Forma...

javascript navigator.language所有语言的列表

javascript Web API接口navigator.language(只读属性)可以返回一个表示用户偏好语言的字符串,通常指浏览器UI的语言(即在浏览器设置中选择的语言),换个思路,使用navigator.language可以在一定程度上判断浏览访客来自哪个国家,至少能判断浏览器使用的是哪国语言(根据浏览器语言的选择)。 navigator.language语言列表: 来自stackoverflow(不知道是不是齐全的) ["af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", ...

PSD字符字重Light、Regular对应CSS font-weight的属性值参考

PSD字符字重Light、Regular对应CSS font-weight的属性值参考

css属性font-weight提供的属性值有normal、bold、bolder、lighter、100~900、inherit,而设计师提供的设计稿字符面板通常是这样的: 而且设计师用字体的字重通常不只有一种,如Thin、UltraLight、Light、Regular、Medium、Semibold、bold、Extra Bold、Heavy等,如下图: 那么如果在网页上引入字体,并设置font-weight属性值的时候,就需要使用数字值了(100 | 200 | 300 | 400 | 500 | 600 | 700 | 8...

实现fullpage.js插件横向滑块slide自动轮播效果

实现fullpage.js插件横向滑块slide自动轮播效果

fullpage插件的slide横向滑块不能设置自动轮播,如果要使slide自动轮播可以使用fullpage插件的moveSlideRight()方法或moveSlideLeft()配合js的setInterval()实现。 代码 setInterval(function(){ $.fn.fullpage.moveSlideRight(); },5000); 或 setInterval(function(){ $.fn.fullpage.方法或moveSlideLeft(); },5000); 如果还想实现鼠标悬停...