通过CSS3或JS或jquery帮助转换效果 [英] helping in transition effect by CSS3 or JS or jquery

问题描述

我想在我的图片文件夹中移动到另一个图片时更改此图片的背景图片
像这样 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_1class =image_holder> 
< img id =image_1class =imagesrc =images / esu.gif/> 
< / div> 
  
 
 
解决方案
 jQuery.cycle是你的答案。 
 
 
 < script type =text / javascript> 
 
 $（document）.ready（function（）{
 $（'。image_holder'）。cycle（{
 fx：'fade'//选择转换类型， ex：fade，scrollUp，shuffle，etc ... 
}）; 
}）; 
< / script> 
 
您应该删除imageid，图像元素应该包含在image_holder指向要循环（转换）的图像的链接。您的html将如下所示：
 < div id =image_holder_1class =image_holder> 
< img src =images / esu.gif/> 
<！ - 您的其他图片来源在这里 - > 
< / div> 
  
如果你的图像转换工作方式和你喜欢的css一样，省略jQuery中的过渡类型。这里是一个链接到不同的转换，可能对你有用的通过使用jQuery.cycle。  jQuery.cycle转换 
 
I want to change the background-image of this picture  while moving  to another one  on my images folder
like this example
that's my code 

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 is your answer.
<script type="text/javascript">

    $(document).ready(function() {
        $('.image_holder').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>
You should remove the "image" id and image elements should be contained inside your "image_holder" that contain links to the images you want to cycle (transition) through. Your html will then look something like this:
<div id="image_holder_1" class="image_holder">
         <img src="images/esu.gif"/>
         <!-- Your other image source(s) goes here -->
</div>
If your image transition worked the way that you liked with your css, use the css for the transition and omit the transition type in the jQuery. Here is a link to the different transitions that may be useful to you by using jQuery.cycle. jQuery.cycle transitions

                        
这篇关于通过CSS3或JS或jquery帮助转换效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！