transforms(变换)属性来实现多种不同的效果

  使用 CSS3 的3D转换特性,大家得以经过让要素在三个维度空间中转换成完结部分奇异的功用。 那篇小说分享的那款 jQuery 立体图片滑块插件,利用了 3D transforms(转换)属性来完毕四种分裂的效果与利益。

  温馨提醒:为保障最棒的作用,请在 IE10 、Chrome、Firefox 和 Safari 等今世浏览器中浏览。

 

图片 1

源码下载      在线演示 

 

  完毕的基本思路是创办三个维度图像切成条,作为三个维度物体的另一侧,旋转并展现下一个图像。若浏览器不帮忙3D转移,三个粗略的滑块将作为后备方案。要调用那一个插件,首先把图纸放在冬日列表中,然后增多 CSS 类——"sb-slider" 即可,下面是 HTML 代码示例:

<ul id="sb-slider" >         <li>          <a   target="_blank">              <img src="images/1.jpg" alt="image1"/>          </a>          <div >              <h3>Creative Lifesaver</h3>          </div>      </li>         <li>          <img src="images/2.jpg" alt="image2"/>          <div >              <h3>...</h3>          </div>      </li>         <li><!-- ... --></li>             <!-- ... -->         </ul>

  其他也还是可以运用带有 class 为 “sb-description” 的DIV来为图片加多描述。如本例所示,您还能够在图像相近增加锚点。然后调用插件就能够了:

$('#sb-slider').slicebox();  

  Slicebox 配备了一组选项,你能够调度以促成区别类别的效果与利益,各样选项和意义如下:

$.Slicebox.defaults = {      // 方向(v)ertical, (h)orizontal or (r)andom      orientation : 'v',      // 元素距离视图的距离,以像素计      perspective : 1200,      // 切片,长方体的数量      cuboidsCount : 5,      // 是否随机      cuboidsRandom : false,      // 长方体最大数量      maxCuboidsCount : 5,      disperseFactor : 0,      // 隐藏滑块的颜色      colorHiddenSides : '#222',      sequentialFactor : 150,      // 动画速度      speed : 600,      // 过渡效果      easing : 'ease',      // 自动播放      autoplay : false,      // 旋转间隔      interval: 3000,      // 淡入淡出速度      fallbackFadeSpeed : 300,      // 回调函数      onBeforeChange : function( position ) { return false; },      onAfterChange : function( position ) { return false; }  };  

 

源码下载      在线演示

 

你只怕感兴趣的有关文章

  • 太赞了!超炫的页面切换动画效果【附源码下载】
  • 新意Infiniti!一组网页边栏过渡动画【附源码下载】
  • 真是好东西!13种特别充沛的页面加载动画效果
  • 您见过呢?9款超炫的复选框(Checkbox)效果
  • 前卫设计!几种奇特网格加载效果【附源码下载】

 

本文链接:jQuery & CSS3 达成 3D 图片滑块 via codrops

编写翻译来源:梦想天空 ◆ 关切前端开荒工夫 ◆ 分享网页设计能源

正文出处【


本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:transforms(变换)属性来实现多种不同的效果

您可能还会对下面的文章感兴趣: