摘要:
实现如图所示的动画效果: 预载动画一:双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。实现如图所示: html代码: css代码: 预载动画二:交错圈 两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。效果: html代码: cs 阅读全文
摘要:
结果如图所示,可以搜索过滤,点击table th可以降序,升序排列当前列 阅读全文
摘要:
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。 注意: 如果想得到连贯的逐帧动画,函数 阅读全文
摘要:
例如: 判断html节点的class是否有no-js。 1.jquery的实现方式 jquery源码的实现方式: 源码里面用到了nodeType,nodeType是HTML DOM 的nodeType 属性,nodeType 属性返回以数字值返回指定节点的节点类型。常用的一般有三种: 例如,获得 b 阅读全文
摘要:
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。 添加类(add) 为 <div> 元素添加多个类: 移除类(remove) 使用remove方法,你可以 阅读全文
摘要:
如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据。如图所示: html代码: js自定义过滤器代码: 比如在输入框中输入'mm',得到筛选的结果如图所示: 阅读全文
摘要:
实现如图所示的东西效果(落叶下落): html代码: css代码: js代码: 转载地址:http://www.html5tricks.com/css3-fall-leaves.html 阅读全文
摘要:
直接贴代码了: 先上输入前的样子: 当在输入框中输入'合同',得到结果如图: 阅读全文
摘要:
sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。语法:arrayObject.sort(sortby);参数sortby可选。规定排序顺序。必须是函数。注:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编 阅读全文
摘要:
vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样: ref="myElement", v-ref:my-component 变 阅读全文
摘要:
v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中,代码如下: 由于v-if是一个指令,需要将它添加到一个元素上。但是如果想要切换多个元素,则可以把<templa 阅读全文
摘要:
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法。 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了。 其实很简单,语音识别是html5的基本功能,它的用法是 如果喜欢XHTML类似的语法,可以这样表示 语音识别在十年前是让人觉得 阅读全文
摘要:
简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript 提示: 链接和图片默认是可拖动的,不需要 draggable 属性。 定义和用法 在拖放的过程中会触发 阅读全文
摘要:
一、关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现,可 阅读全文
摘要:
可以实现手势操作:拖动、缩放、旋转。封装好的脚本方法是这样的: html代码: js调用: 转载地址:http://blog.csdn.net/somethin...touch官网地址:https://www.awesomes.cn/repo/... 阅读全文
摘要:
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开;2.html和htm这样的要写成两个; 3实例: 如果想在手机上实现拍照上传,添加如下代码: 重要的就是这句话:capture="camera" accept="image/*" 下面精简代码(备注),On mobil 阅读全文
摘要:
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于页面或者组件需要渲染加载数据,浏览器和angluarjs渲染页面需要消耗一定的时间,虽然这个时间很多,可能肉眼看不出来,但有的时候加载时间比较长的时候,特别是网络等原因。这样就看到了在渲染前 阅读全文
摘要:
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停。 浏览器支持:Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。Safari 和 Chrome 支持替 阅读全文
摘要:
URI 在维基百科中对于URI的解释是这样子的: 在计算机术语中,统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方 阅读全文
摘要:
html代码: js代码: 说明:1.对比jquery的dom节点的插入方式,vue.js的插值需要使用先new创建一个实例然后通过$mount()。2.手动挂载到dom节点中,然后使用$appendTo/$before/$after等方法进行插值。3.这种操作dom的思想其实并不是vue提倡的方式 阅读全文
摘要:
window.atob() 与window.btoa() WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据。你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 window.atob() 方法来将数据 阅读全文
摘要:
如果想要读取或浏览文件,则需要通过FileReader接口,该接口不仅可以读取图片文件,还可以读取文本或二进制文件,同时,根据该接口提供的事件与方法,可以动态侦察文件读取时的详细状态,接下来,我们详细介绍FileReader接口的使用方法。 FileReader 接口 FileReader 接口提供 阅读全文
摘要:
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法。 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现 阅读全文
摘要:
1.min()和max()方法 Math.min()用于确定一组数值中的最小值。Math.max()用于确定一组数值中的最大值。 2.舍入方法 Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数; Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数; M 阅读全文
摘要:
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的属 阅读全文
摘要:
在SF上看到这个问题,js中怎么理解按位取反? 问题: ~ 运算符查看表达式的二进制表示形式的值,并执行位非运算。Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算。如 ~1 = -2; ~2 = -3; js取反我只知道个!,但是~为什么也叫取反,他返回的又不是boo 阅读全文
摘要:
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.which都兼容。 火狐浏览器对event.keyCode部分键值有效,如上下左右键(37,38,39, 阅读全文
摘要:
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <button>, 或 <input> 元素上: 下面的实例演示了上面所有的 阅读全文
摘要:
表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form"。 把标签和控件放在一 阅读全文
摘要:
一、bootstrap栅格 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 Bootstrap 网格系统(Grid System)的工作原理: 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 B 阅读全文