「Calendario:一个灵活的日历插件」

原文:CALENDARIO: A FLEXIBLE CALENDAR PLUGIN

今天我们想要跟你分享一个灵活的日历概念。当涉及到日历的布局和响应问题时这将变的非常棘手,这是一个实验用来尝试将一些网格布局应用到日历中。我们已经创建了一个关于日历本身的jQuery插件,你可以在演示demo中看到并使用。目标是无论在小屏幕还是大屏幕下都能提供一个合适的布局,并且尽可能的保持日历的流体结构。在大屏幕上我们想要展示一个基于网格的布局,而在较小的屏幕,我们只是简单的堆叠日期。

演示demo源码下载

请注意演示demo只会如预期那样工作在支持新的CSS属性的浏览器上,例如 calc()。

日历设计是基于以下2个在Dribbble上发现的漂亮设计:

要使日历插件能够工作,我们只需要一个含有class名为“c-calendar-container”的容器:

<div id="calendar" class="fc-calendar-container"></div>

插件可以这样被调用:

$( '#calendar' ).calendario();

该插件将创建的日历结构如下:


<div id="calendar" class="fc-calendar-container">
   <div class="fc-calendar fc-five-rows">
      <div class="fc-head">
         <div>Monday</div>
         <div>Tuesday</div>
         <div>Wednesday</div>
         <div>Thursday</div>
         <div>Friday</div>
         <div>Saturday</div>
         <div>Sunday</div>
      </div>
      <div class="fc-body">
         >div class="fc-row">
            <div></div>
            <div></div>
            <div></div>
            <div><span class="fc-date">1</span><span class="fc-weekday">Thu</span></div>
            <div><span class="fc-date">2</span><span class="fc-weekday">Fri</span></div>
            <div><span class="fc-date">3</span><span class="fc-weekday">Sat</span></div>
            <div><span class="fc-date">4</span><span class="fc-weekday">Sun</span></div>
         </div>
         <div class="fc-row">
            <!-- ... -->
         </div>
         <div class="fc-row">
            <!-- ... -->
         </div>
         <div class="fc-row">
            <!-- ... -->
         </div>
         <!-- ... -->
      </div>
   </div>
</div>

日历将包含一个由周列表组成的head和月份中的日期组成的body,每一个单元格包含一个日期和星期几(如果适用),我们通过给容器设置正确的class来控制行高(4、5或者6行),默认的日历样式在calendar.css中定义。

请注意每个单元格将包含如下所示的内容或项目:


<div class="fc-content">
    <span class="fc-date">14</span>
    <span class="fc-weekday">Wed</span>
    <div>
        <!-- Some event/content -->
    </div>
</div>

请注意每个单元格的星期是默认隐藏的,因为我们有含有星期名的头部。而这主要是用来当我们运用media query方法来重设日历的布局为垂直堆叠时显示,这里我们希望显示每一天是星期几。

很明显一个日历应该表示为一个表格,但是由于各浏览器对表格渲染之间存在的差异,我们选择不使用它,当然你可以通过调整插件来输出一个表格。

日历网格成为流体的重要部分是行和单元格的样式:


.fc-four-rows .fc-row  {
    height: 25%;
}
 
.fc-five-rows .fc-row  {
    height: 20%;
}
 
.fc-six-rows .fc-row {
    height: 16.66%;
    height: -moz-calc(100%/6);
    height: -webkit-calc(100%/6);
    height: calc(100%/6);
}
 
.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
    float: left;
    height: 100%;
    width:  14.28%; /* 100% / 7 */
    width: -moz-calc(100%/7);
    width: -webkit-calc(100%/7);
    width: calc(100%/7);
    position: relative;
}

所以我们根据想要的行数来定义不同的高度,我们知道结果不是一个整数所以使用calc(),内部的div宽度将设置为100除以7。

设置

以下默认选项可用:


// initialize calendar with this month (1-12). Default is today
month : null,
 
// initialize calendar with this year. Default is today
year : null,
 
// initial data/content for the calendar
// format:
// {
//      'MM-DD-YYYY' : 'HTML Content',
//      'MM-DD-YYYY' : 'HTML Content',
//      'MM-DD-YYYY' : 'HTML Content'
//      ...
//  }
caldata : null,
weeks : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekabbrs : [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
months : [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthabbrs : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
 
// choose between values in options.weeks or options.weekabbrs
displayWeekAbbr : false,
 
// choose between values in options.months or options.monthabbrs
displayMonthAbbr : false,
 
// left-most day in the calendar
// 0 - Sunday, 1 - Monday, ... , 6 - Saturday
startIn : 1,
 
// callback function for when clicking on a day cell in the calendar
// $el is the cell
// $content is the content division of the cell
// dateProperties is an object with the following properties:
// day : day number,
// month : month number from 1 - 12,
// monthname : name from options.months,
// year : year number,
// weekday : week number from 0 - 6,
// weekdayname : name from options.weeks
onDayClick : function( $el, $content, dateProperties ) { return false; }

以下公共方法可用:


// return the year that is currently being viewed
getYear()
 
// return the month that is currently being viewed (1-12)
getMonth()
 
// returns the name of the month that is currently being viewed
getMonthName()
 
// returns the content division inside the cell associated to day "day"
getCell( day )
 
// sets the data to the calendar. Merges the contents of the passed caldata with the one already set (if any)
setData( caldata )
 
// shows the calendar for today's month and year
// month is from 1-12
gotoNow( callback )
 
// shows the calendar for month "month" and year "year"
// month is from 1-12
goto( month, year, callback )
 
// goes back one month in the calendar
gotoPreviousMonth( callback )
 
// goes back one year in the calendar
gotoPreviousYear( callback )
 
// goes further one month in the calendar
gotoNextMonth( callback )
 
// goes further one year in the calendar
gotoNextYear( callback )

可以使用setData方法来添加内容到日历。你可以在演示demo中看到示例。

基本样式在calendar.css中定义,你可以从示例中看到如何修改样式并且将它添加到自定义的CSS文件中。

演示demo

Demo 1:全屏日历

Demo 2:含有点击事件的简单日历

原创译文 转载请注明出处
英文原文:CALENDARIO: A FLEXIBLE CALENDAR PLUGIN

「Elastislide - 一个响应式jQuery跑马灯插件」

原文:ELASTISLIDE – A RESPONSIVE JQUERY CAROUSEL PLUGIN

Elastislide是一个灵活的适应布局的响应式图片跑马灯插件,它可以根据给定的最小值水平或垂直排列显示图片。

演示demo源码下载

随着响应式这一说法在网站设计中被提起,它正变的越来越重要,我们不光需要注意网站的视觉部分而且还有功能性。Elastislide是一个jQuery响应式图片跑马灯,它能够自适应尺寸和行为以便于工作在任何屏幕尺寸显示器上。将跑马灯结构插入到一个不固定宽度的容器中,它也将是流体的。

在一个跑马灯中,可以认为仅仅使它的容器“更短”将会解决在小屏幕上的问题,但在某些情况下(例如,当我们有更大的影像),这也可能是合理的调整项目。这和其他选项是Elastislide的一部分。

Elastislide使用jQuery++来处理触摸设备上的滑动事件。

HTML结构

要使用这个插件,你只需要把它应用到包含图片(可选锚点)的无序列表中,确保外面的容器是流体的,比如一个基于百分比的宽度。(如果你把跑马灯放入一个固定宽度的容器内,它将无法自适应宽度,所以请确保你的容器是流体布局)


  • image01
  • image02
  • image03

像下面那样使用你喜欢的ID来调用插件:


$('#carousel').elastislide();

设置

Elastislide具有以下默认设置:


$.Elastislide.defaults = {
    // orientation 'horizontal' || 'vertical'
    orientation : 'horizontal',
 
    // sliding speed
    speed : 500,
 
    // sliding easing
    easing : 'ease-in-out',
 
    // the minimum number of items to show. 
    // when we resize the window, this will make sure minItems are always shown 
    // (unless of course minItems is higher than the total number of elements)
    minItems : 3,
 
    // index of the current item (left most item of the carousel)
    start : 0,
     
    // click item callback
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
};

还可以动态的添加新的条目到跑马灯中,下面的例子将介绍如何来实现它:


var carousel = $('#carousel').elastislide();
...
 
$('#carousel').append("
  • image03
  • "); carousel.add();

    需要注意的是,如果你使用Elastislide的垂直布局,容器的高度会自动设置,这取决于你所选择可见图片的多少。

    该插件能IE8及以上浏览器下正常工作,但如果想在IE8下使用,你必须添加注释到你的列表以防止出现白色间隔。

    演示Demo

    Demo1:至少三张图片(默认)总是可见
    Demo2:垂直布局至少三项可见
    Demo3:至少2张图片可见的固定包装容器
    Demo4:在图库中使用:至少4张图片可见

    希望你喜欢这个插件并觉得它很有用!

    原创译文 转载请注明出处
    英文原文:ELASTISLIDE – A RESPONSIVE JQUERY CAROUSEL PLUGIN

    「用jQuery和CSS3打造组合翻转幻灯片」

    原文:Portfolio Flipping Slider Using jQuery & CSS3

    展示我们图片组合的方式有很多,其中之一就是使用网格样式与分页滑动效果。在本教程中,我将分享如何通过使用jQuery和CSS3的transform属性来显示我们的图片组合网格及分页翻转滑动效果。

    演示demo源码下载

    幻灯片行为

    每次翻转时幻灯片会切换我们的组合图片,这个翻转效果是由用户点击页码触发的。因此当用户点击一个页面,组合图片会翻转360度,并且当动画接近结束时图片会切换为新的图片。

    Grid-Pagination1

    我们创建了4种用于动画的翻转效果,分别是:水平往左、水平往右、垂直向上和垂直向下,这些效果将被随机的用于图片展示。

    Animation-Direction1

    标记和样式

    我们将使用无序列表来创建一个图片列表,并且包裹在一个单独的”div”里。这个包装容器将被用于以网格样式显示的我们的组合图片,因为它是通过javascript生成的所以左边留空。

    
    <div id="portfolio"></div>
        
    <ul id="portfolio-item">
      <li><img src="images/dumptruck_teaser.jpeg" alt="Dump Truck"></li>
      <li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="Rrwooo"></li>
      <li><img src="images/dozer_teaser.jpeg" alt="Dozer"></li>
      <!-- to n image -->
    </ul>
    

    包装容器标记包含有一个单独的div,在这个div里包含一个图片容器和一个用作表示图片标题的span,以下标记是用javascript生成结果后的例子:

    
    <div id="portfolio">
      <div style="background:url(images/dumptruck_teaser.jpeg)"> <span>Dump Truck</span></div>
      <div style="background:url(images/rrwooo_rrwooo_teaser.jpeg)"> <span>Rrwooo</span></div>
      <!-- to n div -->
    </div>
    

    组合图片将以网格的形式展现,我们给span一个透明黑色背景的样式,并且给div一个box-shadow和transform-style样式,既然图片列表不需要显示,我们将它设置为display:none。

    
    #portfolio-item {
        display: none;
      }
      
      #portfolio {
        margin: 2em 0 1em;
        transform-style: preserve-3d;
      }
    
      #portfolio div {
        display: inline-block;
        position: relative;
        vertical-align: top;
        margin: 1em;
        width: 200px;
        height: 150px;
        box-shadow: 0px 0px 25px rgba(0,0,0,.3);
      }
      
        #portfolio div span {
          text-align: left;
          position: absolute;
          color: #fff;
          background: rgba(0,0,0,0.6);
          width: 90px;
          padding: 5px 15px 7px;
          z-index: 1;
          left: -10px;
          bottom: 10px;
        }
    

    我们用来给div作为背景的图片在翻转时不必翻转,但是div会用一张新的图片来改变它的background-image值。我们还将创建一个class用做CSS动画,这个class将被添加到翻转的div中,最后一步我们来创建四个效果的class:

    
      .animated {
        transition: .9s ease-out;
      }
      
      .flipped-horizontal-right {
        transform: rotateY(360deg);
      }
      
      .flipped-horizontal-left {
        transform: rotateY(-360deg);
      }
      
      .flipped-vertical-top {
        transform: rotateX(360deg);
      }
      
      .flipped-vertical-bottom {
        transform: rotateX(-360deg);
      }
    

    这是预期的效果:

    css-transform-result1

    Javascript

    首先需要初始化一些我们所需要的用来翻转和改变图片以及显示填充图片的变量。对于填充图片,我们将通过把理组合列表将它们作为div的背景图,当完成以后它们将被追加到div里。

    
    itemShow         = 8;
    indexedItemShow  = itemShow - 1
    itemList         = $('#portfolio-item');
    itemWrapper      = $('#portfolio');
    rotation         = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right'];
    navigation       = $('#navigation a');
    
    for( var i = 0; i < itemShow; i++ ) {
      
      itemImage    = itemList.children('li:eq(' + i + ')').children('img');
      itemSrc      = itemImage.attr('src');
      itemAlt      = itemImage.attr('alt');
      item       = '
    ' + itemAlt + '
    '; itemWrapper.append(item); }

    当导航被点击,它会旋转每一个组合容器的div,使用我们之前初始化的效果,并使用Math.random()来随机的旋转它们,我们将给它添加动画的class名称及所选的效果。

    
    navigation.on('click', function(e) {
        
      e.preventDefault();
    
      navigation.removeClass('selected');
      $(this).addClass('selected');
        
      page = $(this).attr('data-page');
    
      for( var i = 0; i <= indexedItemShow; i++ ) {
    
        random     = Math.floor( Math.random() * ( 3 - 0 + 1 ) );
        animation  = rotation[random];
          
        item       = itemWrapper.children('div:eq(' + i + ')');
    
        item.addClass('animated ' + animation);
      
        /* to next code */
      }
    });
    

    当它运行时,它将基于它的相关当前选择页的索引,穿过所选的组合列表。每一个组合列表抓取它的图片标题(alt值)连同src的值一起,它们中的每一个将改变组合容器的当前每一个div。

    
    window.setTimeout(function (index) {
      return function () {
    
        indexReal    = (page == 1) ? index : (index + (page - 1)) ;
        itemHost     = indexReal + (indexedItemShow * (page - 1));
    
        itemImage    = itemList.children('li:eq(' + itemHost + ')').children('img');
        itemSrc      = itemImage.attr('src');
        itemAlt      = itemImage.attr('alt');
        itemCurrent  = itemWrapper.children('div:eq(' + index + ')');
    
        itemCurrent.css('background', 'url(' + itemSrc + ')');
        itemCurrent.children('span').text(itemAlt);
        };
    } (i), 500);
    

    当动画完成我们将移除每一个div的animated以及效果class名称。

    
    item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
      $(this).removeClass();
    });
    
    

    完成

    正如刚才我描述的,当用户点击页码,图片会立刻发生翻转,尝试访问演示demo查看实际效果。

    原创译文 转载请注明出处
    英文原文:Portfolio Flipping Slider Using jQuery & CSS3

    「用CSS3和jQuery打造视差内容幻灯片」

    原文:PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

    今天,我们想要跟你分享一个简单的视差内容的幻灯片。通过使用CSS3动画,我们将控制幻灯片中每个单一元素的动画效果,并且创建一个幻灯片背景的视差动画效果。

    这个想法的灵感来自于Kendo UI主页——一个现代化的HTML UI框架上的幻灯片,在收到一些关于如何做到这些的请求和问题后,我们决定重新创造这种效果。

    演示demo源码下载

    如何工作

    这个幻灯片组件包含若干张幻灯片,每一个含有一个h2元素、一个段落元素、一个链接和一个图片区域:

    
    <div id="da-slider" class="da-slider">
     
        <div class="da-slide">
            <h2>Some headline</h2>
            <p>Some description</p>
            <a href="#" class="da-link">Read more</a>
            <div class="da-img">
                <img src="images/1.png" alt="image01" />
            </div>
        </div>
         
        <div class="da-slide">
            <!-- ... -->
        
         
        <!-- ... -->
         
        <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
        </nav>
         
    </div>
    

    该幻灯片的核心是每一个元素的动画,我们通过分别给每张幻灯片一个“direction class”来控制元素的行为。例如,当我们要让当前幻灯片滑动到右侧,给它一个名为“da-slide-toright”的class,为每个可能的滑动方向和初始位置将有四个不同的class:

    • .da-slide-fromright
    • .da-slide-fromleft
    • .da-slide-toright
    • .da-slide-toleft

    通过这些class,我们可以控制每个元素的动画:

    
    /* Slide in from the right*/
    .da-slide-fromright h2{
        animation: fromRightAnim1 0.6s ease-in 0.8s both;
    }
    .da-slide-fromright p{
        animation: fromRightAnim2 0.6s ease-in 0.8s both;
    }
    .da-slide-fromright .da-link{
        animation: fromRightAnim3 0.4s ease-in 1.2s both;
    }
    .da-slide-fromright .da-img{
        animation: fromRightAnim4 0.6s ease-in 0.8s both;
    }
     
    /* Adjust animations for different behavior of each element: */
    @keyframes fromRightAnim1{
        0%{ left: 110%; opacity: 0; }
        100%{ left: 10%; opacity: 1; }
    }
    @keyframes fromRightAnim2{
    	0%{ left: 110%; opacity: 0; }
    	100%{ left: 10%; opacity: 1; }
    }
    @keyframes fromRightAnim3{
    	0%{ left: 110%; opacity: 0; }
    	1%{ left: 10%; opacity: 0; }
    	100%{ left: 10%; opacity: 1; }
    }
    @keyframes fromRightAnim4{
    	0%{ left: 110%; opacity: 0; }
    	100%{ left: 60%; opacity: 1; }
    }
    

    设置

    当调用cslider插件可以做如下设置:

    
    $('#da-slider').cslider({
    
    	current		: 0, 	
    	// index of current slide
    	
    	bgincrement	: 50,	
    	// increment the background position 
    	// (parallax effect) when sliding
    	
    	autoplay	: false,
    	// slideshow on / off
    	
    	interval	: 4000  
    	// time between transitions
    	
    });
    

    当滑动时幻灯片背景会朝相反方向移动,这就创建了视差效果。通过设置bgincrement参数,你可以控制它所移动的像素距离。

    演示Demo

    Demo 1: Default options
    Demo 2: Slideshow (different animations)

    请注意,针对那些不支持CSS过渡和动画的浏览器我们使用了一个简单的回退。

    我们希望你能喜欢我们的小实验,并且发现它很实用!

    原创译文 转载请注明出处
    英文原文:PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

    「David Ryle」

    David Ryle – 英国摄影师

    01

    02

    03

    04

    05

    「丰富多彩的CSS3动画导航菜单」

    原文:Colorful CSS3 Animated Navigation Menu

    在这篇简短的教程中,我们将只使用CSS3和Font Awesome图标字体来创建一个丰富多彩的下拉菜单。一个图标字体,顾名思义,就是用一个匹配含义的图标来替代字母。这意味着你可以在每一个支持HTML5自定义字体的浏览器中看到漂亮的矢量图标。要给元素添加图标,你只需要指定一个类名,并且通过样式表里:before元素,该图标就将被添加。

    演示demo源码下载

    HTML

    这里是我们将使用的标记:

    index.html

    <nav id="colorNav">
    	<ul>
    		<li class="green">
    			<a href="#" class="icon-home"></a>
    			<ul>
    				<li><a href="#">Dropdown item 1</a></li>
    				<li><a href="#">Dropdown item 2</a></li>
    				<!-- More dropdown options -->
    			</ul>
    		</li>
    
    		<!-- More menu items -->
    
    	</ul>
    </nav>

    主菜单的每一项是最顶端无序列表的子元素。里面是一个含有icon类名(在这里查看完整的icon 类名)的链接,鼠标悬停时显示下拉菜单。

    css3-animated-dropdown-menu

    CSS3 Animated Dropdown Menu

    CSS

    正如你看到的上面的HTML片段中,在主菜单ul里又嵌套了无序列表,所以必须小心谨慎的编写CSS。我们不想把顶部ul的样式传递给它的后代元素。幸运的是,这可以通过使用子元素选择器“>”来实现:

    assets/css/styles.css

    #colorNav > ul{
    	width: 450px;
    	margin:0 auto;
    }

    宽度和外边距的声明范围仅限于第一个无序列表,也就是 #colorNav 的直接后代。牢记这点,让我们来看下菜单选项实际的样子:

    #colorNav > ul > li{ /* will style only the top level li */
    	list-style: none;
    	box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    	display: inline-block;
    	line-height: 1;
    	margin: 1px;
    	border-radius: 3px;
    	position:relative;
    }

    通过设置一个 inline-block 值以使列表项在同一行内显示,通过指定相对定位来使下拉菜单能够正确的偏移。锚元素包含Font Awesome所定义的所定义的图标。

    #colorNav > ul > li > a{
    	color:inherit;
    	text-decoration:none !important;
    	font-size:24px;
    	padding: 25px;
    }

    现在我们可以继续下拉菜单,这里将定义一个CSS3过渡动画,设置一个最大高度为0像素使下拉菜单隐藏,当鼠标悬停时,最大高度恢复为最大值,这将导致菜单会逐步显示出来:

    #colorNav li ul{
    	position:absolute;
    	list-style:none;
    	text-align:center;
    	width:180px;
    	left:50%;
    	margin-left:-90px;
    	top:70px;
    	font:bold 12px 'Open Sans Condensed', sans-serif;
    
    	/* This is important for the show/hide CSS animation */
    	max-height:0px;
    	overflow:hidden;
    
    	-webkit-transition:max-height 0.4s linear;
    	-moz-transition:max-height 0.4s linear;
    	transition:max-height 0.4s linear;
    }

    这是动画触发器:

    #colorNav li:hover ul{
    	max-height:200px;
    }

    这里200像素的值是任意的,如果你的下拉列表中包含了很多值导致高度不匹配,你将不得不增加它。不幸的是,没有用来检测高度的CSS方法,所以我们不得不将其硬编码。

    下一步是下拉菜单选项的样式:

    #colorNav li ul li{
    	background-color:#313131;
    }
    
    #colorNav li ul li a{
    	padding:12px;
    	color:#fff !important;
    	text-decoration:none !important;
    	display:block;
    }
    
    #colorNav li ul li:nth-child(odd){ /* zebra stripes */
    	background-color:#363636;
    }
    
    #colorNav li ul li:hover{
    	background-color:#444;
    }
    
    #colorNav li ul li:first-child{
    	border-radius:3px 3px 0 0;
    	margin-top:25px;
    	position:relative;
    }
    
    #colorNav li ul li:first-child:before{ /* the pointer tip */
    	content:'';
    	position:absolute;
    	width:1px;
    	height:1px;
    	border:5px solid transparent;
    	border-bottom-color:#313131;
    	left:50%;
    	top:-10px;
    	margin-left:-5px;
    }
    
    #colorNav li ul li:last-child{
    	border-bottom-left-radius:3px;
    	border-bottom-right-radius:3px;
    }

    当然,如果不配上花俏的颜色一切都是白搭,下面是5个颜色的版本:

    #colorNav li.green{
    	/* This is the color of the menu item */
    	background-color:#00c08b;
    
    	/* This is the color of the icon */
    	color:#127a5d;
    }
    
    #colorNav li.red {background-color:#ea5080;color:#aa2a52;}
    #colorNav li.blue {background-color:#53bfe2;color:#2884a2;}
    #colorNav li.yellow {background-color:#f8c54d;color:#ab8426;}
    #colorNav li.purple {background-color:#df6dc2;color:#9f3c85;}

    使用图标字体的灵活的地方在于,你可以通过颜色属性的简单声明来改变图标的颜色,这意味着你可以仅通过CSS完成所有你想要做到的自定义设置。

    完成

    图标字体是网页开发工具包一个很好的补充,因为他们是常规字体,您可以使用自定义的字体大小,颜色和文字阴影属性。这个例子即没有使用图片也没有js,所以它应该能在很短的时间相当容易的在你当前的设计中使用。

    原创译文 转载请注明出处
    英文原文:Colorful CSS3 Animated Navigation Menu

    「CSS3动感气泡按钮」

    原文:CSS3 Animated Bubble Buttons

    本周我们正在创建一套有用的基于CSS3的多背景和动画的动画按钮,使用该按钮包,你可以通过制定一个class名来轻松的将页面上的任何链接到一个动画按钮。 不必使用Javascript,四色主题和三种尺寸,也可以通过额外的class名来分配。

    演示demo源码下载

    HTML

    为了把一个页面上的普通按钮转变为花俏的CSS3动画按钮,你只需要分配一个.button的class名和一个支持的颜色,请看如下示例:

    Download
    Submit
    Submit

    四种可用颜色——蓝色、绿色、橙色和灰色。你分配给上面链接的其它class,都是可选的。你可以从small,medium和big中选择一个尺寸,还有一个类——rounded,用来创建更多圆角的按钮版本。

    这些选择好的class名很简单,便于记忆,但是可能会和你页面上已有的一些class重名而产生冲突。

    如果你在使用按钮时发现不正确,请尝试更改“blue”, “big”, “rounded” 等的类名,使其中一些更独特,要做到这一点你需要修改button.css

    现在,让我们仔细看看使这成为可能的CSS类。

    css3_animated_buttons

    CSS3 Animated Buttons

    CSS

    所有动画按钮相关的CSS代码都在button.css里,这使得它容易在现有的项目中使用。

    注意下面的代码,我在许多地方定义了相同属性的两个版本。这是由于浏览器处理CSS的方式不同所致。他们按顺序解析规则并应用它们,忽略那些浏览器不理解的。这样我们可以有一个包含所有可理解规则的普通版本,和一个CSS3版本用来忽略那些老的规则。

    buttons/buttons.css

    .button{
        font:15px Calibri, Arial, sans-serif;
    
        /* A semi-transparent text shadow */
        text-shadow:1px 1px 0 rgba(255,255,255,0.4);
    
        /* Overriding the default underline styling of the links */
        text-decoration:none !important;
        white-space:nowrap;
    
        display:inline-block;
        vertical-align:baseline;
        position:relative;
        cursor:pointer;
        padding:10px 20px;
    
        background-repeat:no-repeat;
    
        /* The following two rules are fallbacks, in case
           the browser does not support multiple backgrounds. */
    
        background-position:bottom left;
        background-image:url('button_bg.png');
    
        /* CSS3 background positioning property with multiple values. The background
           images themselves are defined in the individual color classes */
    
        background-position:bottom left, top right, 0 0, 0 0;
        background-clip:border-box;
    
        /* Applying a default border radius of 8px */
    
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
        border-radius:8px;
    
        /* A 1px highlight inside of the button */
    
        -moz-box-shadow:0 0 1px #fff inset;
        -webkit-box-shadow:0 0 1px #fff inset;
        box-shadow:0 0 1px #fff inset;
    
        /* Animating the background positions with CSS3 */
        /* Currently works only in Safari/Chrome */
    
        -webkit-transition:background-position 1s;
        -moz-transition:background-position 1s;
        -o-transition:background-position 1s;
        transition:background-position 1s;
    }
    
    .button:hover{
    
        /* The first rule is a fallback, in case the browser
           does not support multiple backgrounds
        */
    
        background-position:top left;
        background-position:top left, bottom right, 0 0, 0 0;
    }

    首先我们需要做的是定义一个按钮的class,它包括了这个按钮的关键信息诸如定位、字体和背景样式。

    首先是字体相关的样式,之后是如下的显示属性,它被设置为inline-block,这样能使它和它所环绕的文本位于同一行内(像行内元素一样)。但也会像块元素那样有填充和外边距。
    你马上会看到,每一个按钮上应用了四个背景图。尽管这听起来挺吓人,但实际上只从服务器上请求了一个文件。前两个背景是如下面插图所示的,气泡图片的左下角和右上角部分,另外两个背景是纯CSS渐变。

    bubble_background

    Bubble Background

    正如我上面提到的,泡沫背景以两个单独的图像,通过设置background-position属性的偏移来显示的。使用CSS3的transition属性,我们定义了一个动画,当鼠标悬停在按钮上时,背景图片的两个版本分别向顶部或底部滑动,从而产生类似气泡的效果。

    现在让我们看一下关于尺寸和圆角的class:

    /* The three buttons sizes */
    
    .button.big        { font-size:30px;}
    .button.medium    { font-size:18px;}
    .button.small    { font-size:13px;}
    
    /* A more rounded button */
    
    .button.rounded{
        -moz-border-radius:4em;
        -webkit-border-radius:4em;
        border-radius:4em;
    }

    这里有三个尺寸的class——small、medium和big,还有一个控制圆角的class——rounded。根据其所含文本大小来确定按钮的大小,这种方式没有显性的指定宽度和高度。

    现在让我们继续有趣的部分——颜色。下面只显示关于蓝色按钮的设置,其余的几乎都是相同的。

    /* BlueButton */
    
    .blue.button{
        color:#0f4b6d !important;
    
        border:1px solid #84acc3 !important;
    
        /* A fallback background color */
        background-color: #48b5f2;
    
        /* Specifying a version with gradients according to */
    
        background-image:    url('button_bg.png'), url('button_bg.png'),
                            -moz-radial-gradient(    center bottom, circle,
                                                    rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                            -moz-linear-gradient(#4fbbf7, #3faeeb);
    
        background-image:    url('button_bg.png'), url('button_bg.png'),
                            -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                                from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
    }
    
    .blue.button:hover{
        background-color:#63c7fe;
    
        background-image:    url('button_bg.png'), url('button_bg.png'),
                            -moz-radial-gradient(    center bottom, circle,
                                               rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                            -moz-linear-gradient(#63c7fe, #58bef7);
    
        background-image:    url('button_bg.png'), url('button_bg.png'),
                            -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                                from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
    }

    每一个颜色的class定义了一组独特的属性——按钮文本标签的颜色、文字阴影和一组背景图片。请注意我们使用background属性来添加按钮的多个背景图片。它们层叠着一个在另一个之上,与所定义的第一个出现在顶部。

    目前只有Mozilla和Webkit浏览器支持CSS渐变,通过2种不同的语法。其余的浏览器将显示背景颜色做为回退,你可能已经注意到,我们没有包括一个前缀版本的渐变规则。这是由于截止目前,渐变规则还不是CSS官方规范的一部分,前缀语法还没有达成一致。

    在上面的代码片段种,你可以看到我们定义了一个线性渐变和径向渐变,为了使渐变效果更平滑的融合进去,我们同时定义了Mozilla和Webkit的径向渐变,通过使用RGBA,使得外部的渐变颜色完全透明。

    至此,我们的CSS3动感气泡按钮就完成了!

    最后的话

    这些按钮是完全基于CSS并且整合他们是极其简单的——只需要把按钮文件夹放到你项目的某处。您可以通过修改CSS文件创建自己的颜色和形状。

    原创译文 转载请注明出处
    英文原文:CSS3 Animated Bubble Buttons

    「用CSS的3D变换打造类似apple的登录表单」

    原文:Apple-like Login Form with CSS 3D Transforms

    你知道可以通过CSS3实现在三维空间中翻转元素吗?你可能近两年才知道有这个玩意,起初是在webkit浏览器上-Safari和Chrome,但现在Firefox上也实现了。这意味着,世界上超过半数的浏览器(即非IE浏览器)可以看到这一先进CSS技术驱动的动画效果。

    演示demo | 源码下载

    在本教程中我们将看到如何使用3D变换来创建一个有趣的类似apple效果的表单翻转效果。

    理念

    我们有两个表单——登录和找回密码,每次仅一个可见。点击链接(例子中的丝带标签),将触发CSS3的围绕Y轴旋转,通过一个翻转的效果显示另一个表单。

    我们使用jQuery来监听链接的点击事件,给表单容器元素添加或移除一个class名。通过CSS同时给2个表单应用Y轴旋转(水平翻转)的变换功能,两者有180度差别取决于class。这将使表单以一个虚构平台的正反面的形式出现,要使过渡产生动画效果,我们需要用到CSS的transition属性。

    了解更多关于CSS3 3D变换,阅读简介或看一些演示

    标记

    我们需要两个表单——登录和找回密码,每一个表单有一个提交按钮,和文本/密码输入框:

    index.html

    <div id="formContainer">
        <form id="login" method="post" action="./">
            <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
            <input type="text" name="loginEmail" id="loginEmail" 
            placeholder="Email" />
            <input type="password" name="loginPass" id="loginPass" 
            placeholder="Password" />
            <input type="submit" name="submit" value="Login" />
        </form>
        <form id="recover" method="post" action="./">
            <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
            <input type="text" name="recoverEmail" id="recoverEmail" 
            placeholder="Your Email" />
            <input type="submit" name="submit" value="Recover" />
        </form>
    </div>

    请注意表单元素的ID,我们将在CSS部分广泛的使用到它们。每次只可见其中一个,另一个将通过翻转动画显示出来。每个表单有一个flipLink锚点,单击将切换(添加或删除)的翻转#formContainer的div的class名称,这将触发CSS3动画。

    apple-like-form-css-3d

    Apple-like Form with CSS 3D Transforms

    jQuery代码

    第一个重要步骤是确定当前浏览器是否支持CSS3的3D变换效果。如果不支持,我们将提供一个回退(表单将直接切换)。我们还将使用jQuery来监听flipLink锚点的点击事件。我们将不会建立这些表单的真实后台环境,所以还需要防止它们被提交。

    这里是如上述所有的代码:

    assets/js/script.js

    $(function(){
    
    	// Checking for CSS 3D transformation support
    	$.support.css3d = supportsCSS3D();
    
    	var formContainer = $('#formContainer');
    
    	// Listening for clicks on the ribbon links
    	$('.flipLink').click(function(e){
    
    		// Flipping the forms
    		formContainer.toggleClass('flipped');
    
    		// If there is no CSS3 3D support, simply
    		// hide the login form (exposing the recover one)
    		if(!$.support.css3d){
    			$('#login').toggle();
    		}
    		e.preventDefault();
    	});
    
    	formContainer.find('form').submit(function(e){
    		// Preventing form submissions. If you implement
    		// a backend, you will want to remove this code
    		e.preventDefault();
    	});
    
    	// A helper function that checks for the
    	// support of the 3D CSS3 transformations.
    	function supportsCSS3D() {
    		var props = [
    			'perspectiveProperty', 'WebkitPerspective',
                            'MozPerspective'
    		], testDom = document.createElement('a');
    
    		for(var i=0; i<props.length; i++){
    			if(props[i] in testDom.style){
    				return true;
    			}
    		}
    
    		return false;
    	}
    });

    为了方便起见,CSS3 3D支持的功能检查被提取到一个独立的辅助函数里,用来检查浏览器对perspective属性的支持。

    现在我们可以继续CSS的部分。

    password-recovery

    Password Recovery

    CSS

    CSS可以处理一切从表单及表单元素的表现,到动画和转换效果,我们将从表单容器的样式开始:

    assets/css/styles.css

    #formContainer{
    	width:288px;
    	height:321px;
    	margin:0 auto;
    	position:relative;
    
    	-moz-perspective: 800px;
    	-webkit-perspective: 800px;
    	perspective: 800px;
    }

    和宽度,高度,外边距和定位一样,我们也设置元素的透视属性,这个属性提供了舞台的深度。如果没有它,动画会变的扁平(尝试禁用它,就会明白我的意思)。值越大,消失点越远。

    接下来我们处理表单本身的样式。

    #formContainer form{
    	width:100%;
    	height:100%;
    	position:absolute;
    	top:0;
    	left:0;
    
    	/* Enabling 3d space for the transforms */
    	-moz-transform-style: preserve-3d;
    	-webkit-transform-style: preserve-3d;
    	transform-style: preserve-3d;
    
    	/* When the forms are flipped, they will be hidden */
    	-moz-backface-visibility: hidden;
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    
    	/* Enabling a smooth animated transition */
    	-moz-transition:0.8s;
    	-webkit-transition:0.8s;
    	transition:0.8s;
    
    	/* Configure a keyframe animation for Firefox */
    	-moz-animation: pulse 2s infinite;
    
    	/* Configure it for Chrome and Safari */
    	-webkit-animation: pulse 2s infinite;
    }
    
    #login{
    	background:url('../img/login_form_bg.jpg') no-repeat;
    	z-index:100;
    }
    
    #recover{
    	background:url('../img/recover_form_bg.jpg') no-repeat;
    	z-index:1;
    	opacity:0;
    
    	/* Rotating the recover password form by default */
    	-moz-transform:rotateY(180deg);
    	-webkit-transform:rotateY(180deg);
    	transform:rotateY(180deg);
    }

    我们首先描述了两个表格共享的通用样式,接下来我们添加区分它们的各自独特的样式。

    backface visibility 属性很重要,它指示浏览器隐藏表单的背面。否则我们将使用找回密码表单的镜像版本来替代登录表单的显示。使用rotateY(180度)转换实现翻转效果,元素从右到左翻转。当我们声明了transition属性以后,每个旋转就会有平滑的动画效果。

    请注意表单区域底部的keyframe声明,它定义了一个重复(通过infinite关键字声明)的、不依赖于用户交互的关键帧动画。CSS动画的描述如下所示:

    /* Firefox Keyframe Animation */
    @-moz-keyframes pulse{
    	0%{		box-shadow:0 0 1px #008aff;}
    	50%{	box-shadow:0 0 8px #008aff;}
    	100%{	box-shadow:0 0 1px #008aff;}
    }
    
    /* Webkit keyframe animation */
    @-webkit-keyframes pulse{
    	0%{		box-shadow:0 0 1px #008aff;}
    	50%{	box-shadow:0 0 10px #008aff;}
    	100%{	box-shadow:0 0 1px #008aff;}
    }

    每个百分比组对应于一个时间点的动画,因为它是盒阴影的重复所以看上去像一个柔和的脉冲光。

    现在让我们看看会发生什么,一旦我们点击这个链接时,名称为flipped的class会添加到# formContainer:

    #formContainer.flipped #login{
    
    	opacity:0;
    
    	/**
    	 * Rotating the login form when the
    	 * flipped class is added to the container
    	 */
    
    	-moz-transform:rotateY(-180deg);
    	-webkit-transform:rotateY(-180deg);
    	transform:rotateY(-180deg);
    }
    
    #formContainer.flipped #recover{
    
    	opacity:1;
    
    	/* Rotating the recover div into view */
    	-moz-transform:rotateY(0deg);
    	-webkit-transform:rotateY(0deg);
    	transform:rotateY(0deg);
    }

    flipped的class 会导致 ID为#login和#recover的div发生180度旋转。这会使得#login表单消失,但是由于#recover的表单的背面原本就已经面对我们,所以它会被显示,而不是隐藏。

    这里的不透明度声明是一个在Android浏览器的bug的修复方式,它忽略了backface-visibility属性,并显示翻转的表单,而不是隐藏它们。通过这个方法,该动画可以工作在除了桌面浏览器以外的Android和iOS上。

    搞定!

    CSS 3D变换打开了通往各种原本只属于很重的flash网页才有的有趣效果的大门,现在我们可以有轻量级的,可抓取的和语义化的网站,并提供适当的回退机制使其在低于标准的浏览器上也有不错的效果。

    原创译文 转载请注明出处
    英文原文:Apple-like Login Form with CSS 3D Transforms

    「类似iPhone的滑动标题效果」

    原文:iPhone-like Sliding Headers

    iPhone有一些独特的UI特性,其中一个比较特别的是当你滚动一个列表时,会出现一个静态的标题,告诉你内容的上下文环境。我们将看到如何使用jQuery来创建这种效果。

    教学视频:Quicktime版本 Flash版本

    演示Demo

    效果

    当用户手指划过一个列表,这段内容的标题会在窗口顶部保持可见,这告诉了用户他们所正在看的上下文是什么。

    一个非常漂亮的UI效果是当一个新的标题即将替换一个现有标题时,将现有标题推出视图。这是非常微妙的,而且只有当你慢慢滚动时才可见。不幸的是,现在,我们还不能复制效果的微妙部分。

    我们要做的是,当用户滚动一个溢出块的内容,可见内容块的标题将保持显示在顶部位置。你可以看下这个演示Demo

    创建效果

    为了创建这种效果,我们需要一个固定定位的伪标题位于内容之上。要做到这一点,我们要通过使用jQuery来搞乱DOM结构。需要在有相同的高度和宽度盒子外再包一层并且给设置position:relative,以便伪标题可以使用绝对定位position:absolute,使它看上去好像是固定的。

    既然这是位于最顶层,我们需要把真正的标题部放在伪标题之上,这样看起来好像他们把伪标题给推了出去。 为实现这一目标,我们将给真正的标题一个高于伪标题的z-index。然而,这将导致它自身的问题。

    所有的标题现在必须是position:absolute才能真正在伪标题之上,这也意味着我们必须给元素一个固定的高度和宽度。这不是什么大问题因为我们可以从原始位置得到这些信息。

    既然标题是绝对定位,文本的位置相互之间紧挨着。因为新放置标题不在文档流里。为了解决这个问题,我们需要创建一个间隔元素。在视频中我提到这应该尽可能的简化。你可以复制标题并将它插入到原始标题之后,并设置position: absolute。为了和视频一致,我还是坚持创建间隔。

    最后,我们需要给包装盒附加一个事件处理器,使得标题能够精确对齐包装盒的顶部,在文本转换时,从这个标题移动到伪标题,并且它的z-index至少大于当前的标题(所以它是顶端的)。

    jQuery

    jQuery的工作分为四个部分:

    1. 收集实现效果所需要的变量
    2. 定位并插入伪标题
    3. 调整绝对定位的标题并且创建间隔
    4. 绑定滚动事件

    如果你想跳过每一步,完成的示例在这里

    变量

    We need to grab jQueryified versions of the container box and headers. 我们需要克隆第一个标题做为伪标题。最后我们初始化z-index并且存储容器的顶部位置,起初,看起来像.offset().top就能做到,但是也要考虑到margin-top和border-top-width,这为我们提供了真实的顶部位置。

    当然整段代码需要用$(document).ready() 方法包裹起来以确保一旦DOM就绪,代码开始运行。

    $(document).ready(function () {
      var $container = $('#box');
      var $headers = $container.find('h2');
      var $fakeHeader = $headers.filter(':first').clone();
      var zIndex = 2;
      var containerTop = $container.offset().top + 
        parseInt($container.css('marginTop')) + 
        parseInt($container.css('borderTopWidth'));

    插入伪标题

    相当直接了当的处理方法:

    1. 给容器外包一层,我的方法是使用一个可重复使用的class名“box”,,并给它相同的高度和宽度,但更重要的是:position:relative;
    2. 给变量$fakeHeader设置CSS;
    3. 从第一个原始标题那继承细节,例如宽度和文本。
    $container.wrap('
    '); $fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() }); $container.before($fakeHeader.text($headers.filter(':first').text()));

    绝对定位标题

    因为我们采取绝对定位的标题,所以需要手动复位元素的宽度。我们还设置一个不断递增的z-index,伪标题可由此跳转到真正的标题之上。

    一旦标题是绝对定位,他们将不会对文档流产生影响,相邻元素相互之间将紧挨着。现在我们需要通过用一个间隔元素来手动纠正这个问题。我创建了一个新的空div元素,并设置高度和宽度到标题的outerHeight和outerWidth。重要的是,我们使用outerHeight而不仅仅是height,因为我们需要包含该元素的外边距。

    如果你在现实环境中使用这个技术,我的建议是,你可以使用代码(在这个例子中我已经做了),或者,如果你发现它不匹配100%,你可以在你的CSS中创建一个class来做为间隔,给新插入的div应用这个class。

    $headers.each(function () {
      var $header = $(this);
      var height = $header.outerHeight();
      var width = $header.outerWidth();
    
      $header.css({
        position: 'absolute',
        width: $header.width(),
        zIndex: zIndex++
      });
    
      // create the white space
      var $spacer = $header.after('
    ').next(); $spacer.css({ height: height, width: width }); });

    使用滚动事件来触发效果

    当用户滚动溢出的容器元素时,我们需要跟踪伪标题的移动位置,一旦通过下面真实的标题,它将匹配文本内容并且使用一个更高的z-index。

    为了做到这点,我们给容器元素绑定一个滚动事件。一旦当它被滚动,我们通过遍历标题来检查它的顶部位置。

    如果顶部位置小于容器的顶部位置(记得包括边距和边框的宽度,以准确的查明这一点),那么我们复制的标题详细信息将传达给伪标题。

    我们实现的效果时:一旦伪标题从真正的标题底下穿过,到它们在页面的视觉上相同的位置时,伪标题会弹开真正的标题,给我们一个现在的标题是锁定的错觉。

    $container.scroll(function () {
      $headers.each(function () {
        var $header = $(this);
        var top = $header.offset().top;
        
        if (top < containerTop) {
          $fakeHeader.text($header.text());
          $fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
        }
      });
    });

    这是我们所需要的,正如你所看到这些教程中,我们只需要将任务分解成更小的任务,一次一点的应用解决方案。

    关于IE

    在IE8下显示效果完美,当然IE6和IE7会有一点问题,有一个细微的差别是由IE6和7的z-index堆栈模型的bug引起的。这个bug是伪标题没有从下面,而是从上面穿过。我让用户在IE下看这个效果时都说没有错误——但现在我已经给你指出了这点,所以你会看到哪里错了。

    原创译文 转载请注明出处
    英文原文:iPhone-like Sliding Headers

    「iView 幻灯片效果」

    原文:http://iprodev.com/2012/07/iview/

    iView是什么?

    iView是像(视频,IFRAME)幻灯片一样包含动画标题,响应式布局和HTML元素的易于使用的jQuery幻灯片效果,轻松添加不限数量的幻灯片和标题。可以用它作为图片幻灯片、图片画廊、轮播广告、横幅广告、甚至多媒体演示。

    这个插件使用不唐突的javascript将一堆简单的html代码标记转化为十分优雅的幻灯片效果,通过使用HTML5的data属性可以完全自定义。标记通过了HTML5验证并且进行了SEO优化,所有的内容都能被提供给搜索引擎。使用这个插件,即使在JavaScript已被禁用的情况下,页面布局也将是完全一致的。

    该插件包含35个可完全配置的过渡效果,而且兼容所有主要的浏览器(包括IE6到IE9,Firefox,Chrome,opera,Safari)以及移动平台如 iOS/ Android)。

    多个自定义幻灯片实例可以共存使用在同一页面上,插件提供了一个简单的API,可以让你通过你的自定义脚本来控制幻灯片的行为。

    为了大幅度降低页面加载时间,预加载可以作为每个幻灯片的基础,图片将在幻灯片开始之前就被正确加载。

    特性

    • jQuery性能
    • 向下响应到移动设备(应用到幻灯片区域和图片)
    • 针对iOS, Android或其他触摸设备的触摸手势导航
    • 高度的灵活性和可定制性
    • 高品质用户界面设计
    • 自定义每张幻灯片缓动效果
    • 多语言支持
    • 35个可用的过渡效果
    • 可以给每一页设置一个不同的过渡效果
    • 允许在单个页面上有多个实例
    • 可自定义每张幻灯片超时时间
    • 动画的HTML标题,可自定义特效(淡入,向前上方,向右移动)
    • 幻灯片只使用有效的HTML5标记(SEO优化)
    • 适用于iOS和Android设备
    • 自动播放,鼠标hover可暂停
    • 轻松调整大小
    • 动画预载进度条
    • 键盘支持
    • 极其简单的结构
    • 缩略图或bullets导航
    • 自定义过渡时间功能(缓动)
    • 兼容外部字体(例如 google字体)
    • 集成三种动画效果和跨浏览器计时器且可完全配置
    • 通过CSS文件轻松定制
    • 块和切片大小可配置
    • 标题可以使用你想要的任何标签(SEO优化)
    • 扩展的HTML文档
    • 幻灯片和标题可以放置任何HTML内容(除了video标签)
    • SEO优化,标题可以使用任何你想要的标签(“h1”,“h2”,“p”)
    • 强大的API:公共方法,属性,回调(滑动,播放幻灯片等)
    • 无限数量幻灯片支持
    • 兼容所有主流浏览器(包括IE6到IE9,Firefox,Chrome,opera,Safari)
    • 免费的支持和升级

    Demo

    原创译文 转载请注明出处
    英文原文:http://iprodev.com/2012/07/iview/