js鼠标滑轮滚动监听触发事件
判断鼠标滚动方向执行不同的事件代码，兼容IE、Firefox、chrome浏览器。javascript代码如下： <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 a...
页面滚动无限加载jQuery插件jquery.infinitescroll.js使用说明
jquery.infinitescroll.js插件的作用是：随着浏览器窗口滚动，不刷新页面自动加载下一页内容，常用于文章列表页面。常见的手机浏览网站的文章列表，浏览到最后一篇时，自动加载更多的文章出来。 插件官网和下载：https://infinite-scroll.com/ 基本用法 在html文件的<head></head>之间引用插件文件： <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js">...
jQuery slice()方法获取指定索引范围内的元素
slice() 把匹配元素集合缩减为指定的指数范围的子集。模仿了 JavaScript 数组对象的 .slice() 方法。它所模仿的特性之一是向 start 或 end 参数传递负数的能力。如果提供负数，则指示的是从集合结尾开始的一个位置，而非从开头。 语法： $('element').slice(selector,end) selector - 基于 0 的整数值，指示开始选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。 end - 基于 0 的整数值，指示结束选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。如果省略，则选取范围会在...
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插件效果预览： 插件代码： 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="book"> <button class="sub">-</button> <input type="text" class="num text" value="100"/> <button class="add">+</button> </div> CSS代码： .book{overflow:hidden;...