把在HTML中多次重复使用的svg代码保存为外部.svg文件，可以减少页面代码冗余，提高代码可读性。 svg图形 menu.svg文件 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xm...
方法一 array.indexOf()方法可以返回数组中某个指定的元素位置，该方法会从头到尾地检索数组，检测是否含有对应的元素，如果检索到，则返回元素第一次出现的位置，如果没有检索到，则返回-1。 示例： var _str = 'two'; var _arr = ['one', 'two', 'three', 'five']; if(_arr.indexOf(_str) > '-1'){ alert('数组中存在该值'); } //_arr.indexOf(_str) 返回结果是1 方法二 array.include...
实现的效果：箭头按弧线的轨迹运行，运行的轨迹为虚线状态，运行到弧线末端后，变成直线运行 HTML代码 <svg width="800px" height="600px" viewbox="0 0 190 150"> <defs> <marker id="markerArrow" markerWidth="6" markerHeight="9" refx="6" refy="5" orient="auto"> <path d="M0,0 L6,5 L0,9"&g...
通过js代码检测当前网页在指定时间内，是否有鼠标移动、滚动操作，键盘是否有按键操作。 var status = 0; var time = 60 * 1000; var mousex, mousey; document.onkeydown = function(e){ status = 1; } document.onmousemove = function(e){ var e = e || window.event; if(e.pageX || e.pageY){ var ex = e.pageX; var ey = e.page...
与 requestAnimationFrame() 方法一样，javascript window对象的 cancelAnimationFrame() 方法同样不支持IE9及其它低版本浏览器，毕竟 cancelAnimationFrame() 方法就是用来取消 requestAnimationFrame() 动画帧的。因此兼容IE9及其它低版本浏览器的方法也差不多。 代码如下： window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || w...
目前使用canvas画布绘制椭圆形的方法有 ellipse()、 scale()、贝塞尔曲线以及 lineTo()，其中比较推荐 ellipse()，但是该方法尚未纳入标准，IE全系列浏览器都不支持，其它浏览器目前比较好。 如果想兼容IE浏览器，可以考虑使用 lineTo() 方法，但是如果要绘制的椭圆像素较大，会存在很大的效率问题，甚至浏览器崩溃，但是小又少的椭圆影响不大。 HTML代码 <canvas id="canvas"> 浏览器不支持Canvas </canvas> javascript代码 ...
IE9以下浏览器或其它低版本浏览器不支持js window对象的方法 requestAnimationFrame()，但是可以结合 setTimeout 以及各自浏览器的专属前缀实现低版本浏览器的兼容。 支持 requestAnimationFrame() 方法的浏览器 代码： window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame |...
在响应式网页开发中 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> <!...
javascript Web API接口navigator.language（只读属性）可以返回一个表示用户偏好语言的字符串，通常指浏览器UI的语言（即在浏览器设置中选择的语言），换个思路，使用navigator.language可以在一定程度上判断浏览访客来自哪个国家，至少能判断浏览器使用的是哪国语言（根据浏览器语言的选择）。 navigator.language语言列表： 来自stackoverflow（不知道是不是齐全的） ["af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", ...
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插件的slide横向滑块不能设置自动轮播，如果要使slide自动轮播可以使用fullpage插件的moveSlideRight()方法或moveSlideLeft()配合js的setInterval()实现。 代码 setInterval(function(){ $.fn.fullpage.moveSlideRight(); },5000); 或 setInterval(function(){ $.fn.fullpage.方法或moveSlideLeft(); },5000); 如果还想实现鼠标悬停...
IE9及IE9以下浏览器不支持placeholder属性，对IE9的placeholder兼容性处理方法通常是把placeholder的属性值放在value属性中，但这样不利于判断值是否为空，兼容性比较好一个方法是用一个元素覆盖在输入框上面代替placeholder，点击时再隐藏。 HTML代码 <div class="input"> <label class="placeholder" for="inpName"><i class="rq">Name</i></label> <i...