Question

我想在我的图片文件夹中更改此图片的背景图片，同时移动到另一张图片 像这样example 这是我的代码

CSS

.image {

    position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);

}
.image:hover {

        opacity:0;
filter:alpha(opacity=0);
    -moz-transform:  scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    -webkit-transform:   scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
    background-color:#36F;

    }

HTML

<div id="image_holder_1" class="image_holder">
    <img id="image_1" class="image" src="images/esu.gif" />
</div>

Answer 1

jQuery.cycle就是你的答案。

<script type="text/javascript">

    $(document).ready(function() {
        $('.image_holder').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>

您应该删除“图片”ID，图片元素应包含在“image_holder”中，其中包含指向要循环（转换）的图像的链接。你的html看起来像这样：

<div id="image_holder_1" class="image_holder">
         <img src="images/esu.gif"/>
         <!-- Your other image source(s) goes here -->
</div>

如果您的图像转换按照您喜欢的方式使用css，请使用css进行转换，并省略jQuery中的转换类型。以下是使用jQuery.cycle可能对您有用的不同转换的链接。 jQuery.cycle transitions

Answer 2

在CSS中无法实现您的示例中的效果，无法取消过渡动画，因此每个动画都必须完成CSS中的鼠标悬停和鼠标移出事件。

通过CSS3或JS或jquery帮助实现过渡效果

2 个答案: