如何通过在 Jquery 中选择图像来将背景更改为所选图像？答案

【问题标题】：how to change background to selected image by selecting image in Jquery?如何通过在 Jquery 中选择图像来将背景更改为所选图像？
【发布时间】：2011-12-10 10:12:50
【问题描述】：

我想通过单击拇指图像来更改我的背景图像..我有这些代码..加载页面工作正常..但是当我单击拇指图像时，我的背景没有改变。请帮忙我的页面加载中有这段代码。此代码在页面加载中加载图像：

$(function() {
                //the loading image
                var $loader     = $('#st_loading');
                //the ul element 
                var $list       = $('#st_nav');
                //the current image being shown
                var $currImage  = $('#st_main').children('img:first');

                //let's load the current image 
                //and just then display the navigation menu
                $('<img>').load(function(){
                    $loader.hide();
                    $currImage.fadeIn(3000);
                    //slide out the menu
                    setTimeout(function(){
                        $list.animate({'left':'0px'},500);
                    },
                    1000);
                }).attr('src',$currImage.attr('src'));

我想通过选择图像将背景更改为所选图像：

//clicking on a thumb, replaces the large image
                $list.find('.sc_menu a').bind('click',function(){
                    var $this = $(this);
                    $loader.show();
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img:first');
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',$this.attr('alt'));
                }).bind('mouseenter',function(){
                    $(this).stop().animate({'opacity':'1'});
                }).bind('mouseleave',function(){
                    $(this).stop().animate({'opacity':'0.7'});
                });

这是我的 html 代码：

<body>

        <div id="st_main" class="st_main">
            <img src="images/2.jpg" alt="" class="st_preview" style="display:none;"/>
            <a class="back" href="#"><< back to Codrops</a>
            <ul class="menu" id="menu">
                <li>
                    <a href="#">Brand 1</a>
                    <div class="sc_menu_wrapper">
                        <div class="sc_menu">
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/3.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/3.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/1.jpg" alt="images/1.jpg"/></a>
                            <a href="#"><img src="images/2.jpg" alt="images/1.jpg"/></a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
</body>

【问题讨论】：

标签： jquery-ui jquery jquery-selectors

【解决方案1】：

试试这个

 $('<img class="st_preview"/>').load(function(){
        var $newimg         = $(this);
        var $currImage      = $('#st_preview').children('img:first');
        $newimg.insertBefore($currImage);
        $loader.hide();
        $currImage.fadeOut(2000,function(){$(this).remove();});
    }).attr('src',$e_next.find('img').attr('alt'));
}

【讨论】：

我认为您正在遵循相同的教程，如果您可以查看此tympanus.net/codrops/2010/09/08/full-page-image-gallery
我认为问题出在 '$list.find('.sc_menu a').bind('click',function()' 部分。
你能放下一个小提琴，以便更清楚地查看问题。
我使用两个鼓室 jquery 教程来创建一个站点..因此我无法在主题之间进行同步..

【解决方案2】：

尝试将$('<img class="st_preview"/>').load 更改为$('img.st_preview').load

第一个在内存中创建一个新的img dom 对象并分配src，第二个找到您现有的st_preview 并更改其attr

【讨论】：