当前位置: 代码迷 >> .NET新技术 >> Jquery中图片滚动有关问题
  详细解决方案

Jquery中图片滚动有关问题

热度:92   发布时间:2016-04-25 01:46:17.0
Jquery中图片滚动问题
才学Jquery不久,望各位大侠多多帮忙


<div id="scroller">

  <div id="image">
  <a href="animate.aspx" class="img"><img src="1024768.jpg" width="150px" height="150px" /></a>
  <a href="animate.aspx" class="img"><img src="10247681.jpg" width="150px" height="150px" /></a>
  <a href="animate.aspx" class="img"><img src="10247682.jpg" width="150px" height="150px" /></a>
  <a href="animate.aspx" class="img"><img src="10247683.jpg" width="150px" height="150px" /></a>
  <a href="animate.aspx" class="img"><img src="10247686.jpg" width="150px" height="150px" /></a>
   
  </div></div>


样式及Jquery代码
<style type="text/css">
  #scroller
  {
  position:relative;
  height:150px;
  width:460px;
  overflow:hidden;
  margin:auto;
   
  }
  #image
  {
  width:770px;
  }
  #scroller a img
  {
  border:0;
  position:relative;
  }
  </style>
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
  {
  //從右向左滑動
  //var $txt=$('#scroller a img');
  //$txt.css({left:0});
  //var img=function(imgblock)
  //{
  //imgblock.animate({left:-770},5000,function()
  //{
  //imgblock.css({left:450});
  //img($(this));
  //}
  //);
  //}
  //img($txt);
  //從左向右滑動
  var $txt=$('#scroller a img');
  $txt.css({right:750});
  var img=function(imgblock)
  {
  imgblock.animate({right:-460},5000,function()
  {
  imgblock.css({right:750});
  img($(this));
  }
  );
  }
  img($txt);
  $txt.hover(function()
  {
  $txt.stop();
  },
  function()
  {
  img($txt);
  }
  );
  }
  );
  </script>

水平方向向左滑动,跟向右滑动时animate函数里边参数的设置不是明白,帮忙解释一下

------解决方案--------------------
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是params 它定义产生动画的css属性,可以同时设置多个此类的属性
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是duration 它定义用来应用到动画的时间。设置的值是 slow fast normal
<script type="text/javascript">
$(document).ready(function(){
$("#start).click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
  相关解决方案