交叉渐变图像

cross-fade images in jQuery

本文关键字：图像 渐变      更新时间：2023-09-26

我在网页上有一个图像，当jQuery滑动条移动时，它会发生变化:

HTML:

<img src="images/flask_image1.png" alt="Isa lab" id="flask" />

滑块HTML: 

<div id="slider1">

脚本:

<script>
  $(function() {
    $( "#slider1" ).slider({
    min: 0,
    max: 4,
    step: 1,
    change: function(event, ui){
        if(ui.value == 1){
            $('#flask').fadeOut(100);
            $('#flask').attr('src','images/flask_image2.png');
            $('#flask').fadeIn(100);
        }else{
            $('#flask').attr('src','images/flask_image1.png');
        };
    }
    });
  });
</script>

然而，这所做的是图像逐渐淡出，改变，然后淡出，"工作"，但它暂时消失。

是否有一种方法来交叉褪色2图像?

好了，我认为很简单，与实现一些插件相比，代码少得多，难度也小得多:http://jsfiddle.net/gcvqr/2/

<img src="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png" id="slider">
<button>Change Image</button>
jQuery

var stopWorking=false;
var firstSrc="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc="http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$('button').click(function(){
    if(!stopWorking){
        stopWorking=true;
    $('body').append('<img src="'+$('#slider').attr('src')+'" id="fadingImg">');
    $('#fadingImg').css({
        'position':'absolute',
        'width':'400px',
        'height':'400px',
        'top':'0px',
        'left':'0px'
    });
        if($('#slider').attr('src')==firstSrc){
            $('#slider').attr('src',secondSrc);
        } 
        else{
            $('#slider').attr('src',firstSrc);
        }
    $('#fadingImg').fadeOut(1000,function(){
        $('#fadingImg').remove();
        stopWorking=false;
    });
    }
});

注意:

为了使它在你的页面中工作，你需要给#fadingImg你的滑块img的样式，定位在它的右边。

相关文章：