Question

我在jquery有点新，需要一些帮助，我在网上寻找解决方案并尝试编辑它以满足我的要求。我想要的是一个更改背景事件，内部还有一个滑块，当更改控件时，背景也会改变。我做到了，但我遇到了两个问题：

我需要在点击时重置间隔（现在混合它向上）
我需要在背景中改变动画直接改变（轻松或淡化）

这是代码： -

$(window).load(function(){
    var images = ['images/background/body-bg.jpg','images/background/body-bg2.jpg'];
    var i = 0;

    function changeBackground() {
        $('html').css({
            'background': function(){
                             if (i >= images.length) {
                                i=0;
                            }
                            return 'url(' + images[i++] + ')';

                        },
            'background-position':'center',
            'background-attachment':'fixed',
            'background-size':'cover'
        })
    }

    // Call it on the first time
    changeBackground();

    (function(){
        $('.sliderControl > li').children().on('click', function(){
            changeBackground();
            window.clearInterval()
        })
    })();

    // Set an interval to continue
    setInterval(changeBackground, 5000);

});

Answer 1

使用js tween库可以轻松实现这一目标

http://www.jstween.org/

                          {
            id: "JSframe1",
            //audio: "<filename and path, without extension>",
            play: function(JQtarget, FNcallback) {
                JQtarget.find(".JSimage1").tween({



                        transform:{
                            start: 'rotate(0deg) scale( 1 )',
                            stop: 'rotate(360deg) scale( 1 )',
                            time: 0,
                            duration: 1,
                            effect:'linear'
                            },
                            width: {
                            start: 1,
                            stop: 100,
                            time: 0,
                            duration: 1,
                            units: '%'

                            },
                            height: {
                            start: 1,
                            stop: 100,
                            time: 0,
                            duration: 1,
                            units: '%'
                            },


                });
                setTimeout(FNcallback, 7000);
                $.play();
            }
        },

动画和重置间隔

1 个答案: