Question

我为每个菜单使用javascript函数并调用该函数onClick事件。我所面对的是图像没有平滑变化，有时它的加载速度很慢。

让我们考虑2个链接，每个链接调用一个函数来改变身体的背景

这就是我现在改变的方式

function events(){
   $("body").css('background-image','url(./wp-content/Uploads/img3.jpg)');
}

function projects(){
   $("body").css('background-image','url(./wp-content/Uploads/img2.jpg)');
   return false;
}

HTML

<li id="projectsm"><a href="#projects" onClick="projects();" class="stylish">Projects</a></li>
<li id="eventsm"><a href="#events" onClick="events();" class="stylish">Events</a></li>

因此，当我点击菜单时，它必须变换为淡出或平滑而不是闪烁的东西

Answer 1

如果我了解您的问题，您可以点击链接使用jQuery更改正文背景图片，但它不够流畅/足够快。

我认为这主要是因为当您更改背景时，新背景尚未加载。因此必须加载，然后在加载时进行更改。

解决方案：

您可以在文档加载
您可以加载新背景，然后调用切换功能

在这两种情况下，您都可以使用ImagesLoaded插件在需要时加载图片（https://github.com/desandro/imagesloaded）。

然后，如果您想要平滑过渡，可以在身体选择器上使用CSS3 Transition：

transition: background-image 1s ease-in-out;

但我不确定转换是否适用于背景图像属性......

Answer 2

尝试此代码，如果这是您想要的：

您需要先加载图片，然后使用javascript。

HTML：

<img src="http://lorempixel.com/400/200/city" alt="" width="0" height="0" />
<img src="http://lorempixel.com/400/200/people" alt="" width="0" height="0" />
<ul>
    <li id="projectsm">Projects</li>
    <li id="eventsm">Events</li>
</ul>

JS：

$(function(){
    $('#projectsm').click(function(){
        $('body').css('background-image','url(http://lorempixel.com/400/200/city)')
    });
    $('#eventsm').click(function(){
        $('body').css('background-image','url(http://lorempixel.com/400/200/people)')
    });
});

并且为了平滑过渡，请使用css3过渡属性

CSS：

body{
    background-image:url(http://lorempixel.com/400/200/animals);
    background-repeat:no-repeat;
    background-size:cover;
    -webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    -ms-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
}

http://jsfiddle.net/sL8q7nbb/1/

使用jquery平滑地更改每个导航菜单的站点背景图像

2 个答案: