夏日博客

A-A+

jquery中animate列表滚动效果代码

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

animate在jquery中的作用是animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果，下面来看一些关于animate的例子。

最简单的animate例子

方式一:以“属性名/值”对象的方式定义动画终止样式属性。例如:$("div").animate( {width:"1000px"})

以上代码能够将div从原有的宽度调整到1000px。也可以一次性使用多组“属性名/值”对象。例如:

$("div").animate( {width:"1000px",fontSize:20})

以上代码能够将div从原有的宽度调整到1000px，从原有的字体大小调整到20px。需要特别注意以下三点:

1.如果尺寸没有单位，那么默认单位是px。

2.属性值需要用双引号包裹，如果属性值是数字的话可以省略。

3.类似font-szie或者background-color这样的属性需要去掉中间的中横线，并且第二个单词首字母要大写

例子，用animate实现简单的列表数据滚动,可以通过按钮查看上一条和下一条数据,实现效果如下:引用文件:jquery.js

  1. <section class="list">  
  2. <input type="button" value="up" />  
  3. <div id="parent">  
  4.  <div>  
  5.  <div id="inner">  
  6.  <p>这是列表数据1</p>  
  7.  <p>这是列表数据2</p>  
  8.  <p>这是列表数据3</p>  
  9.  <p>这是列表数据4</p>  
  10.  <p>这是列表数据5</p>  
  11.  <p>这是列表数据6</p>  
  12.  <p>这是列表数据7</p>  
  13.  <p>这是列表数据8</p>  
  14.  <p>这是列表数据9</p>  
  15.  <p>这是列表数据0</p>  
  16.  <p>这是列表数据11</p>  
  17.  </div>  
  18.  </div>  
  19. </div>  
  20. <input type="button" value="down" />  
  21. </section>  
  22.   
  23. <script>  
  24.  $(function(){  
  25.    
  26.  var up=$("input").eq(0);  
  27.  var down=$("input").eq(1);  
  28.  var inner=$("#inner");  
  29.  var h=$("#inner").find("p").height();  
  30.  var num=parseInt($("#parent").css("height"))-parseInt(inner.css("height"));  
  31.    
  32.  if(parseInt(inner.css("marginTop"))==0){  
  33.  down.attr("disabled","disabled").css("color","yellow");  
  34.  }  
  35.    
  36.  up.click(function(){  
  37.  if(parseInt(inner.css("marginTop"))<=num){  
  38.  up.attr("disabled","disabled").css("color","yellow");  
  39.  }else{  
  40.  down.removeAttr("disabled").css("color","#FFF");  
  41.  inner.animate({"marginTop":"-="+h});  
  42.  if(parseInt(inner.css("marginTop"))==num){  
  43.  up.attr("disabled","disabled").css("color","yellow");  
  44.  }  
  45.  }  
  46.  });  
  47.  down.click(function(){  
  48.  if(parseInt(inner.css("marginTop"))>=0){  
  49.  down.attr("disabled","disabled").css("color","yellow");  
  50.  }else{  
  51.  up.removeAttr("disabled").css("color","#FFF");  
  52.  inner.animate({"marginTop":"+="+h});  
  53.  if(parseInt(inner.css("marginTop"))==0){  
  54.  down.attr("disabled","disabled").css("color","yellow");  
  55.  }  
  56.  }  
  57.  });  
  58.    
  59.  });  
  60. </script>  
标签：

给我留言