<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML(svg)之弹性摇晃页面切换特效</title>
<link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/slideshow.css" />
<script src="http://files.cnblogs.com/files/caidupingblogs/snap.svg-min.js"></script>
<script src="http://files.cnblogs.com/files/caidupingblogs/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div id="slideshow" class="slideshow">
<ul>
<li>
<div class="slide">
<h1>演示(可用键盘"←"和"→"操作)</h1>
</div>
</li>
<li>
<div class="slide">
<blockquote>
<p>世间没有一种具有真正价值的东西，可以不经过艰苦辛勤的劳动而能够得到的。</p>
</blockquote>
<p>爱迪生</p>
</div>
</li>
<li>
<div class="slide">
<blockquote>
<p>我们感觉走到了尽头，其实只是心走到了尽头。再深的绝望，都是一个过程，总有结束的时候，回避始终不是办法。鼓起勇气昂然向前，或许机遇就在下一秒。</p>
</blockquote>
<p>余秋雨</p>
</div>
</li>
<li>
<div class="slide">
<blockquote>
<p>我不去想是否能够成功，既然选择了远方，便只顾风雨兼程。</p>
</blockquote>
<p>汪国真</p>
</div>
</li>
<li>
<div class="slide">
<blockquote>
<p>一滴水只有放进大海里才永远不会干涸，一个人只有当他把自己和集体事业融合在一起的时候才能最有力量。</blockquote>
<p>雷锋</p>
</div>
</li>
<li>
<div class="slide">
<blockquote>
<p>业精于勤，荒于嬉;行成于思，毁于随。</blockquote>
<p>韩愈</p>
</div>
</li>
</ul>
</div>
</div><!-- /container -->
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/classie.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/sliderFx.js"></script>
<script type="text/javascript">
(function(){
new SliderFx( document.getElementById(‘slideshow‘), {
easing : ‘cubic-bezier(.8,0,.2,1)‘
});
})();
</script>
</body>
</html>