安静的对折-CSDN博客

原创前端C3属性模仿支付宝咻一咻

使用c3的动画属性，来模拟支付宝的咻一咻功能，没有添加音频效果，可以使用H5的audio音频标签来实现音效播放 html, body { width: 100%; height: 100%; } body{ display: flex;

2017-01-08 23:12:08 712

原创 H5C3实现无缝轮播

我们可以使用H5C3的新属性来实现无缝轮播图，首先创建动画，然后使用动画属性，在将要轮播的图片复制一份，这样就可以实现图片的无缝轮播，但是这样实现有一个缺点那就是需要加载的图片更多了 * { padding: 0; margin: 0; } div {

2017-01-05 22:45:28 3406

原创使用jQuery实现无缝轮播图

轮播图我们很常见的功能，可以使用原生的js进行实现，也可以使用jQuery进行实现，还可以使用H5C3进行实现，当然也可以使用swiper插件很方便的实现，这里先用jQuery实现一个无缝的轮播。思路：1、首先获取要操作的对象2、设置鼠标移入移出时显示和隐藏左右按钮3、给左右按钮添加点击事件，让ul移动一个图片的宽度4、给对应的小按钮设置点击事件，已经添加背景色5、添加一个

2017-01-04 21:01:43 7899

原创使用jQuery对下拉列表框的选项进行移动demo

用jQuery操作下拉列表框中的选项，可以进行单一移动，也可以多项进行移动 select { width: 100px; height: 150px; } $(function () { //全部移动到右边

2017-01-04 20:05:57 1701

原创 jQuery中表格全选反选demo

使用jQuery实现一个简单的表格全选与反选的案例 * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; }

2017-01-04 19:58:04 2763

原创 jQuery五星好评demo

在电商网站，我们经常会用到五星评分的功能，现在用jQuery实现一个简单的demo 五角星评分案例 * { padding: 0; margin: 0; } .comment { font-size: 40px; col

2017-01-04 19:49:48 2710

原创 jQuery动态创建元素以及追加节点

我们知道js中有三种动态创建元素的方法，jQuery中也可以动态的创建元素例如： var str = $("百度"); $("ul").append(str); //将动态创建的str元素追加到ul下面追加节点在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素，位置)，在jQuery中是append 追加在

2016-09-24 22:42:57 20002

原创 jQuery中动画效果

JQuery中动画效果的方法，都有两个参数，时间和回调函数，时间可以是数字，也可以是字符串slow，normal，fast 1、滑入滑出（改变的是高度）slideDown () 使用滑动效果，显示被选的元素。如果元素已经显示，则不产生任何变化，如果有回调函数，则执行回调函数 slideUp () 使用滑动效果，隐藏被选元素。如果元素已经隐藏，则不产生任何变化，如果

2016-09-24 21:07:23 418

原创 jQuery 操作类

addClass() 方法向被选元素添加一个或多个类，该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。removeClass () 方法从被选元素移除一个或多个类。hasClass () 方法检查被选元素是否包含指定的 class。toggleClass () 对设置或移除被选元素的一个或多个类进行切换

2016-09-24 00:21:14 265

原创 jQuery中获取节点

siblings() 相邻的兄弟节点,不包括自己本身next() 下一个兄弟节点parent() 父节点find() 相当于后代选择器 111 span标签 333 444 span标签 //

2016-09-23 23:24:57 785

原创 offset、scroll、client三大家族

1、offset 偏移1、offsetWidth 和 offsetHeight 是用来得到对象的大小，由自身宽高内边距边框构成但是不包括外边距offsetHeight和style.height的区别1>style.height只能获取行内样式，offsetHeight可以获取行内样式和内嵌样式2>style.height是字符串（而且带单位），offs

2016-09-23 00:26:14 8431

原创 JS中动态创建元素的三种方法

1、动态创建元素一 document.write() 例如向页面中输出一个 li 标签 document.write("123");body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容2、动态创建元素二 innerHTML var box = document.getElement

2016-09-19 23:00:00 8565

原创 DOM中的克隆节点

克隆节点cloneNode()克隆节点cloneNode(false)浅拷贝，只拷贝当前标签节点，而不拷贝标签节点中的内容以及子节点，cloneNode(true)深拷贝，标签中的所有内容全部都拷贝 Document 1111 2222 3333 4444 var ul = document.get

2016-09-18 23:23:58 2015

原创 DOM中的第一个和最后一个子节点

firstChild、lastChild 获取第一个、最后一个子节点，谷歌和火狐浏览器获取的是文本节点，而IE8及之前的浏览器会忽略文本节点，获取的是第一个、最后一个子节点firstElementChild、lastElementChild 获取第一个、最后一个子节点，谷歌和火狐浏览器获取的是第一个、最后一个子节点，但是IE8及之前的浏览器不支持使用

2016-09-18 22:49:24 2572

原创 DOM中的兄弟节点

nextSibling、previousSibling 获取下一个、上一个兄弟节点，谷歌火狐浏览器获取的文本节点，而IE8及之前的浏览器会忽略文本节点，获取的是下一个、上一个标签节点 nextElementSibling、previousSibling 获取下一个、上一个兄弟节点，谷歌火狐浏览器获取的是下一个、上一个标签节点，忽略文本节点，但是IE8及之前的浏览器不支持使用

2016-09-18 22:43:45 1826 1

原创 DOM中的节点类型

因为文档对象是由节点组成，而节点又包括：标签节点，属性节点，文本节点，注释节点如何来区别这些节点的类型呢？需要使用nodeType,节点除了有nodeType，还有nodeName，nodeValue先来看下父节点和子节点 parentNode 获取父节点（或者是父元素），节点与元素是等价的 childNodes 是DOM的标准属性，不但可以获取标签

2016-09-18 22:36:16 361

原创 js中DOM的自定义属性

js中DOM的自定义属性方法有：1、设置自定义属性：setAttribute2、获取自定义属性：getAttribute3、移出自定义属性：removeAttribute下面就来看一下它们的具体使用方法 Document //获取对象 var txt = document.getElementById("inp");// c

2016-09-17 23:44:29 7696

原创 demo1-排它思想-tab栏切换

在js中排它思想非常重要，因为在网面中会经常用到这一思想，例如购物网站上的tab栏切换，以及轮播图……因此写一个小demo来看一看排它思想，如下图所示，点击某一个按钮时，当前按钮改变背景颜色，并且其它按钮的背景颜色变成默认颜色，同时下面的div也跟着显示相应的内容。代码： .box { width: 350p

2016-09-17 23:25:55 335

原创 innerText 与 innerHtml的区别（二）

innerText 与 innerHtml不仅在获取元素文本上有区别，而且在设置上同样有区别。1、innerText 在设置HTML标签时，会将 Document var box = document.getElementById("box"); box.innerText = "这是P标签这是P标签这是P标签";

2016-09-17 23:16:00 455

原创 innerText 与 innerHtml的区别（一）

innerText 与 innerHtml 都是打印标签之间的文本信息1、innerText打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent Document 这是P标签这是P标签这是P标签 var box = docu

2016-09-16 23:33:33 42680 1

原创 js数组的方法

数组就是一个有序的数据集合，可以存放任意类型的数据。创建数组的两种方式：1、通过构造函数创建var arr = new Array();2、通过字面量创建var arr = [];数组的方法// concat 连接多个数组，并返回结果 var a = [1, 2, 3]; var b = [4, 5, 6];

2016-09-13 21:51:03 319

原创 JS中String()与 .toString()的区别

我们知道String()与 .toString()都是可以转换为字符串类型，但是String()与 .toString()的还是有区别的1、.toString()可以将所有的的数据都转换为字符串，但是要排除null和 undefined例如将false转为字符串类型 var str = false.toString(); console.log(str,

2016-09-02 00:00:11 3331

原创 JS中短路运算符&&和||

在JS函数中我们经常会使用到短路运算符，主要是逻辑与（&&）和逻辑或（||）1、逻辑与 && 的运算方式var a = 5 && 6;console.log(a); //返回的结果为 6如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。var a = false && 6;console.log(a); //返

2016-09-01 23:09:40 21609 2

原创 css中圣杯布局

圣杯布局就是左右两边的图片保持不变，中间的搜索框因浏览器的大小改变而改变，典型案例的如天猫页面搜索框，如图首先我们设置一个父盒子包含三个小盒子并给父盒子设置样式，高度为100px，上下padding为0，左右padding为200px.box { padding: 0 200px; height: 100px;

2016-08-31 22:25:38 634

原创 css中淘宝网的更多三角制作

前面说了易迅三角的实现方法，现在来说说另外一个三角-淘宝三角，如下图所示淘宝三角形该怎么实现呢？肯定是需要两个三角形来层叠在一起的，只要进行如下图的层叠这个淘宝三角就出来了。代码如下：同样需要使用子绝父相的方法来进行定位，好让两个三角形层叠在一起 Document .one { positi

2016-08-31 22:22:03 908

原创 CSS中易迅网三角形的制作

购物网站上的三角形非常常见，那么我们该如何实现呢，比如我们要实现易迅网上那种倒三角，如下图首先如果一个盒子我们把它的宽高都设置为0，边框分别设置10个像素不同的颜色，我们看看会出现什么情况？ div { width: 0; height: 0; border-t

2016-08-31 22:18:15 528

原创 CSS中子绝父相布局

如果我们要将hot图片放到下图的位置，我们该怎么实现？首先我们来进行布局，用一个div包括一个a标签和img标签，并给a标签设置样式，如下代码： Document * { margin: 0; padding: 0; } .hot a {

2016-08-31 22:12:01 49223 8

原创 CSS中元素隐藏的几种方式

说一说CSS中关于元素隐藏的几个小例子1、overflow:hidden将超出部分隐藏 .one { width: 300px; height: 150px; background: pink; } 第一最好不相见，如此便

2016-08-31 22:07:12 2446

原创 CSS中position定位

在我们布局的时候，我们会经常使用到position属性，它规定了元素定位的类型，元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行确定。下面说一下它常用的三种定位机制 1、 absolute 绝对定位下面代码有三个盒子，每个盒子的宽高都是100px，给第三个盒子设置绝对定位，并距离body左边框20px，body顶部边框20px，

2016-08-31 22:00:23 428

原创 CSS中清除浮动的几种方式

前面我们说了浮动后的元素会影响后面的元素，在进行页面布局的时我们使用了浮动后，会给我们带来很大的困扰，那么现在来说说清除浮动的几种的方法1、使用额外的标签法，这也是W3C上面使用的方法在浮动的盒子之下再放一个div标签，使用clear：both来清除浮动， * { margin: 0;

2016-08-31 21:52:57 1908

原创 CSS中浮动的特点

我们在给标签设置浮动后，会有一下几个特点1浮动会脱离标准流如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断2浮动的元素会影响下面的元素，不会影响上面的元素 * {

2016-08-31 21:49:02 5584

原创 CSS中行高的继承和单位之间的关系

我们知道行高是可以继承的并且行高的单位有四种情况。1具体像素值如：line-height: 16px;2 emem是指当前标签设置的字体大小，比如当前标签字体大小是16px，那么2em = 32px；3 %%与em一样都是以当前标签设置的字体大小为基准，比如当前标签字体大小是16px，那么line-height: 200%; 则字体大小为32px

2016-08-31 21:40:33 2821

原创 CSS中margin的两种现象

margin设置两个标签边框之间的距离，但是会有两种现象：1、margin外边距的合并现象如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后取值较大的那个 .one { width: 2

2016-08-31 21:28:13 546

原创 CSS中padding的特殊性

通常我们都知道设置padding值会改变盒子的大小，现在就来说说，在什么情况下，设置padding不会改变盒子的大小。当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽度是继承大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。 .one { width:

2016-08-30 23:24:21 506

原创 CSS三大特性之优先级

优先级的顺序：行内样式>id选择器>类选择器>标签选择器>*通配符选择器>继承有点晕，先看代码，例如有如下代码，运行后的字体颜色为红色，可以从行内样式依次进行屏蔽，就可以发现样式的优先级如上所述 * { /*通配符选择器*/ color: pink; } b

2016-08-30 21:51:57 772

原创 CSS三大特性之层叠性

CSS三大特性之二层叠性，什么是层叠行，层叠性就是浏览器处理冲突的一个特性，如果一个属性通过多个选择器设置到同一个元素上面，那么这个时候就会只有一个选择器起作用，而其他的选择器都将背层叠掉，前提是选择器的权重一样，也就是说这些选择器的优先级相同，后面的博客会讲优先级，这里先考虑优先级相同。有如下代码，先给body设置颜色为红色，然后再给div设置为绿色，最后给h2设置蓝

2016-08-28 21:57:08 1743 1