2013年05月所有文章

JS批量操作元素样式之css函数

JS中设置元素样式

在JS中,操作元素样式有多种方法,比如:改变元素的style属性,改变样式表(cssRule),改变元素style的cssText属性。但是每次写起来都比较的麻烦,如果要设置高和宽的话,JS里常见的写法是这样:

obj.style.width = 100;
obj.style.height = 100;

如果我们能够像jQuery里那样设置就方便多了,比如像这样:

css(obj,{
	"width":"100px",
	"height":"100px"
});

OK,按照这个思路开写。…

JS练习-模仿MacOS下的Dock

苹果系统下的Dock

苹果系统下最吸引睛球之一的就是它下面的Dock了:

macosdock

在学习JS的过程中,试着将这个效果简单的实现了一下:JS练习Mac OS下的Dock

代码实现:

准备工作

首先把所需要的图片准备好(一些苹果系统下面的图片和Dock的背景图):

icons

dockbg

然后把它们引入到HTML中做一下简单的布局:

<div class="dock">
	<img src="icon/1.png">
	

JS练习:OOP版Tab

练习面向对象编程

这个小插件只是用来练习面向对象编程的,只是很普通Tab面板的切换而已,效果请点击:JS练习:OOP版Tab.

代码实现

基本结构

HTML

在HTML中,我们把列表项和内容项分开来,列表项是一个ul,内容是一个DIV里面套了若干个DIV:…