博客一歇就是半年，略惭愧...元旦假期各种惬意：打打Dota(悲催的输多赢少)、滑滑雪；吃吃东西、逛逛街。转眼儿今天就得上班了，5点早早起床(最近坚持早睡早起)，忍不住分享下前段时间发现的前端工程师装X的利器，所以这新年第一篇博文诞生了:)

　　你希望别人看到你的演示文稿会发出“wow”吗？你希望使用华丽的效果来震惊你的观众吗？ 那咱们往下看

------------------正文分割线------------------

概述

　　如果你已经厌烦了使用PowerPoint制作PPT，那么impress.js是一个非常好的选择，用它做的PPT更加直观，效果也非常的不错。装X是需要一定代价的，不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTML和CSS也没问题，看看这篇文章 + 一点点实践（把官网上的例子拿来改改）即可...

　　impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。

　　目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

　　impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js

　　官方demo地址：http://bartaz.github.com/impress.js

　　因为在其项目网页中却没有找到说明文档&使用文档，所以这篇文章将一步一步创建一个较初级的演示文稿，我们接着往下走。

　　请准备好现代浏览器：Google Chrome(效果最佳)、Safari或FF.
　　*我的IE10不支持，不知道为什么很多资料上写着IE10也能支持，背了个催。

配置

• 在wrapper内创建一个幻灯片只需要新建一个的<div>即可。<div>的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如

•  数据属性：用来描述幻灯片大小，切换等效果。

　　data-x = 幻灯片的x坐标

　　data-y = 幻灯片的y坐标

　　data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍

　　data-rotate = 通过一个数字度数来确定旋转你的幻灯片

　　data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）

　　data-rotate-y

首先，定义树的节点数据类型，树的节点包含数据data 和树的父节点parent

//定义树的节点数据
function Node(data ,parent)
{
    switch(arguments.length)
    {
        case 0:this.data=null;this.parent=null; break;
        case 1:this.data=arguments[0];this.parent=null; break;
        case 2: this.data=arguments[0];this.parent=arguments[1];
    }
}

//定义树结构

function Tree()
{

   //存储树的节点，该数组的长度即为树的节点的总数
    var treeNodes=new Array();

//判断树是否为空
Tree.prototype.IsEmpty=function()
{
    if(treeNodes.length==0)
    {
        return true;
    }
    else
    {
        return false;
    }
}
//获取或者设置树的跟节点，在此方法中，如果参数的个数为零，并且树不为空，

//则获取树的根节点，参数rootNode的类型为自定义的Node
Tree.prototype.Root=function(rootNode)
{
    var treeN=new Node();
    if(treeNodes.length>0&& arguments.length==0)
    {
        return treeNodes[0];
    }
    else
    {
        treeN.data=rootNode.data;
        treeN.parent=null;
        treeNodes.push(treeN);
        return treeN;
    }
}

Tree.prototype.IsContainNode=function(parentNode)
{
    for(var i=0;i<treeNodes.length;i++)
    {
        if(treeNodes[i]==parentNode)
        {
            return true;
        }
        else {return false;}
    }
}

//向树中添加节点，参数，parentNode为新插入的节点的父节点，

//node为要插入的新节点
Tree.prototype.InsertNode=function(parentNode,node)
{
    var treeN=new Node();
    treeN.data=node.data;
    treeN.parent=parentNode;
    treeNodes.push(treeN);    
    return treeNodes.length;
};

//检索父节点为parentNode的所有子节点。
Tree.prototype.SelectChildNodes=function(parentNode)
{
    var nodes=new Array();
    for(var i=0;i<treeNodes.length;i++)
    {
        var node=treeNodes[i];
        if(node.parent==parentNode)
        {
            nodes.push(node);
        }
    }
    return nodes;
}
}

本文链接

下载地址：http://code.google.com/p/freecms/  

根据附件字符串(多个之间用;分隔)提取附件对象。

参数

说明

attchStr

附件字符串(多个之间用;分隔)

返回值

说明

attchUrl

附件地址

attchName

附件名称

示例1

提取信息附件

<@infoAttchs attchStr="${currInfo.attchs}";attchUrl,attchName>

<a href=/blog_article/"${attchUrl}"/index.html target="_blank">${attchName}</a><br/>

</@infoAttchs>