基于HTML5和CSS的焦点图全屏切换的炫酷特效

基于HTML5和CSS的焦点图全屏切换的炫酷特效，带有自动轮播图片,带有不同时间切换的jquery特效，切换时，背景图片会有细微的动态变化，略带有弹性效果，切换时图片和按钮有一定的时间差。先来看看主要的代码有哪些：

 1 <section class="first"> 
 2         <img alt="Kendo UI" src="images/home-banner-1.png"/> 
 3         <div class="text"> 
 4                 <h2>SmartSite Ver 2.2<br />
 5                 智能网站管理系统 </h2> 
 6                 <p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p> 
 7                 <p class="button">
 8                     <a href="http://www.jqshare.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqshare.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqshare.com/']);" href="http://www.jqshare.com/">Learn More</a>
 9                 </p> 
10           </div> 
11 </section>

上面的代码就是一个切换页面的布局，然后倒入js

1 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script>
2 <script type='text/javascript' src='js/common.js'></script>
3 <script type='text/javascript' src='js/slider.js'></script>

最终预览的效果是这样的：

基于HTML5和CSS的焦点图全屏切换的炫酷特效

以上就是这样特效的简介

特效来源地址：http://www.jqshare.com/Divcss/fondone/id/13.html

转载于:https://www.cnblogs.com/heyoung/archive/2013/05/13/3075985.html

基于HTML5和CSS的焦点图全屏切换的炫酷特效

相关推荐