Question

我一直在为一家小公司的投资组合工作。我计划从e-onetime http://eone-time.com/#team获得与此相同的功能你认为这可以用gif图像实现。我想要的功能是在悬停gif动画1次，或者我应该设置多个图像，就像他们在他们的投资组合中做的那样，让它上下滚动点击。

这是我的TEAM部分中的一个部分，其中包含静态gif和动画gif：

<!-- Team Section -->
<section id="team" class="content-section text-center">
    <div class="team-section">
        <div class="container">
            <div class="col-lg-8 col-lg-offset-2">
                <h1>TEAM</h1>
                <HR>

            </div>
        </div>
<!-- Team Grid  --><section class="main">
    <div id="items">
        <div class="item">
            <a id="1" class="work page-scroll">
                <img class="media" src="img/tryimages/greggy.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/greggy.gif"/>
                <!--<h2 class="title">Click</h2>!-->
                </div>
            </a>
        </div>

        <div class="item">
            <a id="2" class="work page-scroll">
                <img class="media" src="img/tryimages/dennise.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/dennise.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="3" class="work page-scroll">
                <img class="media" src="img/tryimages/jm.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/jm.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="4" class="work page-scroll">
                <img class="media" src="img/tryimages/hannah.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/hannah.gif"/>
                </div>
            </a>
        </div>
    </div>
</section><!-- End of Works Grid  -->

这是我为团队资料管理器提供的javascript函数：

</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
  var id = $(this).attr("id");
  $("#pages div, #pages2 div").siblings().hide("slow");
  $("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
  var id = $(this).attr("id");
  $("#pages2 div, #pages div").siblings().hide("slow");
  $("#pages2 div#" + id + "").toggle("slow");
});
</script>

Answer 1

使用background-image类的css关键帧为.animated设置动画，然后将其添加到您的javascript：

$('#items a').mouseover(function(){
  $(this).toggleClass('animated');
});

在悬停功能上向上和向下滚动一组图片

1 个答案: