论坛首页 Web前端技术论坛

超棒的视差效果jQuery插件 - FractionSlider

浏览 3461 次
精华帖 (0) :: 良好帖 (6) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2013-12-16   最后修改:2013-12-16

 

 

在线演示1

 

 

如果你希望找到一款与众不同的jQuery幻灯插件的话,Fractionslider/ 肯定会让你眼前一亮,和传统幻灯不同的是,它可以让页面中的任何元素生成独立的动画效果。

 

 

使用非常简单,如下:

 

引入CSS和JS

 

  1. <linkhref="fractionslider.css"rel="stylesheet"/>
  2. <scripttype="text/javascript"src="jquery-1.9.0.min.js"></script>
  3. <scripttype="text/javascript"src="jquery.fractionslider.js"></script>

 

HTML

 

  1. <divclass="slider"><!-- your slider container -->
  2. <divclass="slide"><!-- all elements for the first slide --></div>
  3. <divclass="slide"><!-- all elements for the second slide --></div>
  4. <!-- and so on -->
  5. <divclass="fs_loader"><!-- shows a loading .gif while the slider is getting ready --></div>
  6. </div>

 

需要动画效果的元素:

 

  1. <imgalt=""src="path/to/image"data-position="100,100"/>

 

调用插件:

 

  1. jQuery(window).load(function(){
  2. $('.slider').fractionSlider();
  3. });

 来源:http://www.gbtags.com/gb/share/2541.htm

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics