我想在我的图片文件夹中更改这张图片的背景图片,同时移动到另一张图片 像这样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>
最佳答案
jQuery.cycle 就是您的答案。
<script type="text/javascript">
$(document).ready(function() {
$('.image_holder').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
您应该删除“image”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
关于javascript - 通过 CSS3 或 JS 或 jquery 帮助过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5275798/