首页 专题 H5案例 前端导航 UI框架
翻页太辛苦，试试直接搜索

月份：2016年06月

27篇文章 作者： TG

TG  ·  2016-06-29

JS中的call、apply、bind方法

在JavaScript中，call、apply和bind 是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。

call、apply、bind方法的共同点和区别：
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文（函数的每次调用都会拥有一个特殊值——本次调用的上下文（context）——这就是this关键字的值。）；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
阅读 7142 阅读全文

TG  ·  2016-06-18

JS节点的属性及方法

一、属性
Attributes   存储节点的属性列表（只读）
childNodes   存储节点的子节点列表（只读）
dataType     返回次节点的数据类型
documentElement  返回文档的根元素（可读写）
firstChild   返回当前节点的第一个子节点（只读）
lastChild    返回当前节点最后一个子节点（只读）
nextSibling  返回当前节点的下一个兄弟节点（只读）
nodeName     返回节点的名字（只读）
nodeType     返回节点的类型（只读）（9代表Document节点、1代表Element节点、3代表Text节点、8代表Comment节点、11代表DocumentFragment节点）
nodeValue    返回节点的文本（可读写）
ownerDocument 返回包含此节点的根文档（只读）
parentNode   返回父节点（只读）
previousSibling  返回此节点的前一个兄弟节点（只读）
Text         返回此节点及其后代的文本内容
firstElementChild 返回第一个Element节点
lastElementChild  返回最后一个Element节点
nextElementSibling  返回下一个兄弟Element节点
previousElementSibling 返回上一个兄弟Element节点
childElementCount  子元素的数量
阅读 4056 阅读全文

TG  ·  2016-06-16

React入门教程

一、简介
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
ReactJS官网地址：http://facebook.github.io/react/
阅读 3486 阅读全文

TG  ·  2016-06-14

JavaScript在浏览器上的调试技巧

在网站开发中，我们难免会遇到各种bug，这时，我们就需要去调试我们的JavaScript脚本找出问题，然后去修改代码。那我们如何去调试呢？

最简单的就是alert()方法，不过，alert 弹出窗口会中断程序， 而且如果要在循环中显示信息，就会弹出多个弹窗，你不点击alert框的确定按钮下一个alert就不会出现，另外alert 显示对象永远显示为[object ]，所以alert()方法只适合小程序。

第二种是断点调试
1.在源码上使用debugger
阅读 5848 阅读全文

TG  ·  2016-06-11

仿Material UI框架的动画特效

Material UI 是一款功能非常强大，界面却十分清新简洁的CSS框架，Material UI利用了Google的Material Design 全新设计语言，并且让每一个UI组件都变得非常独立，因此开发者使用Material UI也会比较简单。和Bootstrap类似，Material UI提供了很多常用的UI组件，除了最基本的菜单、按钮、滑动杆、进度条、单选框/复选框外，它还提供了一个非常有趣的日历组件，另外还提供了一些很有趣的图标。

不过，这里我并不打算介绍Material UI的使用，而是介绍如果实现Material UI内的动画特效，比如点击按钮会出现波浪扩散的动画效果、表单获取焦点动画等等。

注意：要使用下面的动画效果，必须引入jQuery。

一、点击按钮会出现波浪扩散的动画效果

为了效果，我这里特意将波浪的颜色加深。
先看效果：

阅读 5903 阅读全文

TG  ·  2016-06-11

图片的一扫而过的闪影

在一些网站上，其logo采取了这种效果，比如：自主学习网

我们来看看它是如何实现的？

div布局：
<div class="banner">
    <img src="logo.png" />
</div>
阅读 3372 阅读全文

TG  ·  2016-06-11

Web移动端Fixed布局的解决方案

特别声明：本文转载于EFE的《Web移动端Fixed布局的解决方案》。如需转载，烦请注明原文出处：http://efe.baidu.com/blog/mobile-fixed-layout

移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

一、iOS下的 Fixed + Input BUG现象
让我们先举个例子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用如下布局（以下仅示意代码）：
阅读 3450 阅读全文

TG  ·  2016-06-10

SVG入门指南

SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径，等等的来组成。

SVG特点：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
阅读 4300 阅读全文

TG  ·  2016-06-10

关于bootstrap IE8的兼容性问题

现在越来越多的网站都使用了Bootstrap，到现在，Bootstrap3是使用率较为高的，在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，不过，在ie8下的时候，还是出现了很多让人头疼的坑，现在我将解决方法总结一下：

  • ie8不支持media

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
阅读 6020 阅读全文

TG  ·  2016-06-09

图片轮番详解

图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。
下面，我将介绍一种实现图片轮番的方法。

首先是div：
<div class="swiper-container"> 
   <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="background:red;">index1</div> 
      <div class="swiper-slide" style="background:yellow;">index2</div> 
      <div class="swiper-slide" style="background:green;">index3</div> 
   </div> 
</div>
我们先定义一个class名为swiper-container的外层，然后是内层swiper-wrapper（这一层也是我们轮番的层），最后是每一页，我在这里命名为swiper-slide。
阅读 3711 阅读全文

TG  ·  2016-06-07

图片懒加载其实并不难！

为了节约网络带宽和提高了初次加载的速度，现在各大网站里都使用了图片懒加载方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片。 光知道逻辑并不行，还需要用代码去实现，如何去实现呢？其实并不复杂，下面我会具体分析说明。 既然是图片懒加载，当然需要显示图片的img，不过我们不能直接添加src，而是给img设置一个新属性data-src，然后赋值为图片真正的地址，当然，你也可以定义任意合法的属性名。
阅读 3733 阅读全文

TG  ·  2016-06-06

autocomplete属性失效的解决方法

当我们做一个登陆页面时，如果用户选择了浏览器弹出的记住密码，那么，每次进登陆页面的时候，表单都会自动注入内容，但是，我们有些时候并不需要这样，那我们如何去禁止表单中注入内容呢？


很多人都会使用autocomplete属性，可是在chrome浏览器下，这个属性完全失效，真是让人头疼。

下面介绍两种方法：

1. 加一个隐藏input
<input name="a" autocomplete="off"> 
<input type="password" style="display:none"> 
 <input type="password" name="b">

阅读 7063 阅读全文

TG  ·  2016-06-05

程序员，请对自己好一点！

阅读 4086 阅读全文

TG  ·  2016-06-05

物体对象

在前面的《用户交互》和《动画》两章中，我们分别介绍了用户交互事件，包括：鼠标事件，触摸事件和键盘事件，还有如何加载多张图片，如何用window.requestAnimationFrame()来执行动画。

接下来，我们介绍一下在动画中的一个重要角色：物体。要使用物体对象，我们就必须捕获到物体对象。

不过，在canvas中，我们不能像在DOM中那样进行操作，为什么呢？

因为在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，所以JavaScript也无法获取到已经绘制好的图形元素。
阅读 3301 阅读全文

TG  ·  2016-06-04

canvas入门基础（九）：基础动画

实现动画，我们首先想到的肯定是setTimeout和setInterval，这两个在这里就不细说了。

除了这两个外，我们还可以使用window.requestAnimationFrame()这个方法。

requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API

window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。
注意: 如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。
阅读 4361 阅读全文