注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

动感十足的CSS3鼠标滚轮滚动插件jQuery Smoove

动画 fishcity 5082浏览

动感十足的CSS3鼠标滚轮滚动插件jQuery Smoove

jQuery Smoove一款非常强大鼠标滚轮滚动效果插件,jQuery Smoove很轻松便可实现鼠标滚动的时候页面的内容随着滚动展现绚丽的动感十足的css3动画效果。

jquery实例:jQuery Smoove使用方法

1、引入核心文件,请确保jQuery在smoove.js之前加载。

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="../dist/jquery.smoove.js"></script>

2、通过JavaScript激活jQuery Smoove插件。

$('.foo').smoove(options);

3、下面的代码实例将是在样式类为foo的元素上使用插件的默认值初始化jQuery Smoove,可以通过配置参数来覆盖默认值。

<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>
<script>
  // Attach Smoove to elements and set default options
  $(".foo, .bar").smoove({
    offset  : '15%',
    // moveX is overridden to -200px for ".bar" object
    moveX   : '100px',
    moveY   : '100px',
  });
</script>

选项:

Name Type Default Description
offset integer or string 150 Distance to the bottom of the screen before object glides into view e.g. 10%.
opacity integer (0-100) 0 The opacity of the object before it comes into view.
perspective integer 1000 3D perspective in pixels.
transformOrigin string 50% 50% Origin of the transform in pixel, percentage or keyword (left, right, top or bottom).
skewY angle none 2D skew along Y-axis e.g. 90deg.
move string none 2D move along the X- and the Y-axis e.g. 100px,50%.
move3d string none 3D move along the X-, Y- and the Z-axis e.g.10px,10px,10px.
moveX string none Move the object along its X axis e.g. 10px or 10%.
moveY string none Move the object along its Y axis e.g. 10px or 10%.
moveZ string none Move the object along its Z axis e.g. 10px or 10%.
rotate string none 2D rotation e.g. 90deg.
rotate3d string none 3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg.
rotateX string none 3D rotation along X-axis e.g. 90deg.
rotateY string none 3D rotation along Y-axis e.g. 90deg.
rotateZ string none 3D rotation along Z-axis e.g. 90deg.
scale decimal or string none 2D scale on X- and Y-axis (x,y) (e.g. 2.5 or 2,0.5).
scale3d string none 3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5).
scaleX decimal none 2D scale on X-axis.
scaleY decimal none 2D scale on Y-axis.
skew angle none 2D skew along X- and the Y-axis (e.g. 90deg,90deg).
skewX angle none 2D skew along X-axis e.g. 90deg.
skewY angle none 2D skew along Y-axis e.g. 90deg.

转载请注明:jQ酷 » 动感十足的CSS3鼠标滚轮滚动插件jQuery Smoove

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。