Question

是否有任何jQuery插件可以执行与此类似的操作：Acer Site？

我有一个客户想要这个功能而不知道它甚至叫什么意味着我不能谷歌它和我的javascript不足以克隆它。

Answer 1

你的意思是向右滑动的元素？您只需使用animate方法即可。浮动div元素并排，其中左侧元素的初始宽度为零。要显示一个框，您可以为元素添加动画，然后在其中显示内容。

示例：

<style type="text/css">

.slideBox { float: left; margin: 2px; width: 0; height: 200px; background: #eee; }
.slideBox .content { display: none; margin: 10px; background: #ccc; }
#first { width: 100px; }
#first .content { display: block; }

</style>

<script type="text/javascript">

$(function(){
  $('#first').click(function(){
    $('#second').animate(
      { width: '100px' },
      {complete:function(){ $('#second .content').css('display','block'); }}
    );
  });
  $('#second').click(function(){
    $('#third').animate(
      { width: '100px' },
      {complete:function(){ $('#third .content').css('display','block'); }}
    );
  });
  $('#third').click(function(){
    $('#fourth').animate(
      { width: '100px' },
      {complete:function(){ $('#fourth .content').css('display','block'); }}
    );
  });
});

</script>

<div class="slideBox" id="fourth"><div class="content">fourth</div></div>
<div class="slideBox" id="third"><div class="content">third</div></div>
<div class="slideBox" id="second"><div class="content">second</div></div>
<div class="slideBox" id="first"><div class="content">first</div></div>

jQuery插件克隆

1 个答案: