SVG元素是一种特殊的DOM元素，可以使用CSS以及一般的JS类库来实现动画控制。但是这些方法都没提供SVG动画样式属性的完整控制，现在介绍一个专门的SVG动画类库Snap.svg，其github地址为： https://github.com/adobe-webplatform/Snap.svg
Snap.svg提供多种安装方式。
功能描述： 创建或加载已有的SVG元素。
参数说明：
返回值： SVG元素
功能描述： 根据JS选择器加载SVG元素内已有的图形元素。
参数说明：
返回值： 选择器命中的元素Element，当存在多个命中的元素时，只返回第一个元素
功能描述： 在SVG元素内绘制一个圆。
参数说明：
返回值： 新建的circle元素Element
功能描述： 在SVG元素内绘制一条Path。
参数说明：
返回值： 新建的path元素Element
功能描述： 在SVG元素内绘制一个矩形。
参数说明：
返回值： 新建的rect元素Element
功能描述： 在一段时间内匀速变更相关属性到目标值。
参数说明：
返回值： 动画对象
功能描述： 根据设置的参数，执行动画操作。
参数说明：
返回值： mina格式的动画对象
功能描述： 执行位移操作。
参数说明：
功能描述： 使推行围绕指定的圆心，旋转一定角度。
参数说明：
初始化参考上面“基本实现步骤”中的相关描述，后续只描述动画控制部分。
《Snap.svg API文档》
《使用 Snap.svg 制作动画》
推荐使用IE9，因为： 标准互通 IE9将更多的支持HTML 5、CSS3、JS、SVG矢量图等互联网浏览通用标准，这样做的好处是网页不需要专门针对IE来进行测试也能正常的展现在用户面前。Acid3是互联网标准工程组织(WaSP)发布的测试标准，主要用于测试浏览...使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js（这里lz用了zeptoJS或者大家可以用jquery）假设我们有这么一段html
[html] view plaincopy
<div id="wrapperIndexActivity" class="wrapperIndexActivity">
<div class="scrollerActivity" id="scrollerActivity">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
首先先对ID（wrapperIndexActivity）加载iscroll
[javascript] view plaincopy
var homeScroll = new iScroll("wrapperIndexActivity", {
snap : true,
momentum : false,
hScrollbar : false,
vScrollbar : false,
checkDOMChanges : true,
onScrollEnd : function() {
}
})
对Id所属class附加样式：
[css] view plaincopy
.wrapperIndexActivity{ width:100%height:100%position:relativez-index:1overflow:hiddendisplay: block}
然后需要对ID（scrollerActivity）计算有几幅屏幕可以切换（这里假设有4幅）
[javascript] view plaincopy
$("#scrollerActivity").style({
'width' : document.body.clientWidth * 4 + 'px'
})
对应class需附加样式：
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity{ height:100%float:leftpadding:0overflow:hidden}
再然后对li 让每一个列表项都撑满屏幕
[javascript] view plaincopy
$('#wrapperIndexActivity ul li ').style({
'width' : document.body.clientWidth + "px"
})
对应class附加样式：
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box display:blockheight:100%float:left}
最后刷新iscroll
[javascript] view plaincopy
// 刷新数据
omeScroll.refresh()
