javascript对象

By hiluluke on Oct 10 2015

主要是因为再重新读了一遍《javascript高级程序设计》（后文称其为js高）后对js的对象有了进一步认识，所以想写点东西总结下。

js对象基础

理解对象

创建对象的方式有很多种，通常有以下三种：

通过创建一个Object实例然后再添加属性和方法
通过对象字面量的方式的方式：

var person = {
	name: "Nicholas",
	age: 29,
	job: "Software Engineer",
	sayName: function(){
		alert(this.name);
 	}
};

通过函数的方式

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = function(){
		alert(this.name);
	};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
}

阅读全文

好玩的蹦床效果日常翻译六

By hiluluke on Sep 10 2015

demo和原文在这

今天分享一个有趣的小动画。主要的想法是在切换导航（navigating）图片时模拟蹦床的弹性效果。其中的图片拖拽效果我们使用的是Elastic STack。而svg的动画，我们使用了snap.svg。当然我们在整个过程中会使用css 的transitions属性。

demo中的图片使用得是Leonard Nimoy，是为了向他致敬，其上周逝去了。（外国程序员好有情怀）

阅读全文

如何创建一个平铺背景滑动效果日常翻译五

By hiluluke on Sep 3 2015

今天我们将看看如何实现像Serge Thoroval’s Atelier中的全屏背景滑动特效。
demo和原来译文

为了达到这个滚动效果，我们需要一个能让我们构造4个不同“瓷砖”效果的特别标签结构，它们将使用同一张图片的不同部分。因为我们这是一个全屏滚动效果，所以我们需要确保让所有元素都延伸至全屏。为了使得我们能制定那个图片被可见，我们需要定义一个简单的初始结构并构建我们“瓷砖”的重复结构。初始结构就像这样：

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
	<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
	<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
	<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
	<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

为了去将一张图片分成4个小瓷砖，我们为每个面板构建如下的重复结构：

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
	<div class="panel current">
		<div class="bg-tile">
			<div class="bg-img"><img src="img/1.jpg" /></div>
		</div>
		<div class="bg-tile">
			<div class="bg-img"><img src="img/1.jpg" /></div>
		</div>
		<div class="bg-tile">
			<div class="bg-img"><img src="img/1.jpg" /></div>
		</div>
		<div class="bg-tile">
			<div class="bg-img"><img src="img/1.jpg" /></div>
		</div>
	</div>
	<div class="panel">
		<div class="bg-tile">
			<div class="bg-img"><img src="img/2.jpg" /></div>
		</div>
		<div class="bg-tile">
			<div class="bg-img"><img src="img/2.jpg" /></div>
		</div>
		<div class="bg-tile">
			<div class="bg-img"><img src="img/2.jpg" /></div>
		</div>
		<div class="bg-tile">
			<div class="bg-img"><img src="img/2.jpg" /></div>
		</div>
	</div>
	<div class="panel">
		<!-- ... -->
	</div>
	<div class="panel">
		<!-- ... -->
	</div>
	<nav>
		<span class="prev"><i></i></span>
		<span class="next"><i></i></span>
	</nav>
</div>