2010年11月19日
留一个jquery的滑动样例
<html>
  <head>
  <title>here</title>
  <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  </head>
  <body style="text-align: center;">
  <div style="width:540px; margin: 0 auto;">
  <div id="button1" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">1</div>
  <div id="button2" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">2</div>
  <div id="button3" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">3</div>
  <div id="button4" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">4</div>
  <div id="button5" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">5</div>
  <div id="button6" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">6</div>
  <div id="button7" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">7</div>
  <div id="button8" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">8</div>
  <div id="button9" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">9</div>
  <div id="button10" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">10</div>
  </div>
  <div style="clear: both"></div>
  <div style="width: 540px; margin: 0 auto; height: 400px; position: relative; z-index: 999; overflow: hidden;">
  <div style="position:relative;padding:0px;margin:0 auto;width:100px;">
  <div id="list" style="width:1000px;height:400px;position:absolute; z-index:9;left:-220px;">
  <div style="width:96px;height:400px;background-color:#004;margin:2px;float:left;color:#FFF;">1</div>
  <div style="width:96px;height:400px;background-color:#008;margin:2px;float:left;color:#FFF;">2</div>
  <div style="width:96px;height:400px;background-color:#00F;margin:2px;float:left;color:#FFF;">3</div>
  <div style="width:96px;height:400px;background-color:#044;margin:2px;float:left;color:#FFF;">4</div>
  <div style="width:96px;height:400px;background-color:#048;margin:2px;float:left;color:#FFF;">5</div>
  <div style="width:96px;height:400px;background-color:#04F;margin:2px;float:left;color:#FFF;">6</div>
  <div style="width:96px;height:400px;background-color:#444;margin:2px;float:left;color:#FFF;">7</div>
  <div style="width:96px;height:400px;background-color:#448;margin:2px;float:left;color:#FFF;">8</div>
  <div style="width:96px;height:400px;background-color:#44F;margin:2px;float:left;color:#FFF;">9</div>
  <div style="width:96px;height:400px;background-color:#484;margin:2px;float:left;color:#FFF;">10</div>
  </div>
  </div>
  </div>
  </body>
  <script>
  $(document).ready(function(){
  var speed = 1000;
  var div_width = $("#list > div:first").width() + parseInt($("#list > div:first").css("margin-left")) + parseInt($("#list > div:first").css("margin-right"));
  var offset = 220;
  $(".button").click(function(){
  id = $(this).attr("id").replace("button","");
  var _length = -(id - 1) * div_width - offset;
  $("#list").animate({left:_length + "px"},speed);
  });
  });
  </script>
  </html>
posted @ 2010-11-19 17:13 今天我不乖 阅读(242) 评论(0) 编辑