Question

我想知道如何使用Ken Burns效果制作幻灯片。（图像交叉渐变和动画，例如放大时向左平移。）

我简化了示例，以尽可能少的杂乱显示代码。在示例中，div替换幻灯片中的图像。

Answer 1

这是css

    <style>
    div {
        position: absolute;
        opacity:0;
        }
    #div1 {
        background: red;
        z-index: 1;
        }
    #div2 {
        background: green;
        z-index: 2;
        }
    #div3 {
        background: blue;
        z-index: 3;
        }
    </style>

这是Jquery

    <script>
    $(document).ready(function(){
        animation1(); // launch slideshow
    });

    function animation1(){
        $("#div1").css({"left":0, "opacity":0, "width":"200px", "height":"200px"}); // set css
        $("#div1").animate({
        opacity: 1 // fade in
        }, {
        duration: 3000,
        queue: false
        }).animate({
        left: "300px", // move
        width: "50px",
        height: "50px"
        },{
        duration: 6000,
        queue: false
        })
        .delay(4000) // delay 
        .animate({
        opacity: 0 // fade out
        }, {
        duration:2000,
        start: animation2 // launch animation2
        });
    }

    function animation2(){
        $("#div2").css({"left":0, "opacity":0, "width":"50px", "height":"50px"}); // set css
        $("#div2").animate({
        opacity: 1 // fade in
        }, {
        duration: 3000,
        queue: false
        }).animate({
        left: "300px", // move
        width: "200px",
        height: "200px"
        },{
        duration: 6000,
        queue: false
        })
        .delay(4000) // delay 
        .animate({
        opacity: 0 // fade out
        }, {
        duration:2000,
        start: animation3 // launch animation3
        });
    }

    function animation3(){
        $("#div3").css({"left":"300px", "top":"200px", "opacity":0, "width":"50px", "height":"50px"}); // set css
        $("#div3").animate({
        opacity: 1 // fade in
        }, {
        duration: 3000,
        queue: false
        }).animate({
        left: 0, // move
        top: 0,
        width: "200px",
        height: "200px"
        },{
        duration: 6000,
        queue: false
        })
        .delay(4000) // delay 
        .animate({
        opacity: 0 // fade out
        }, {
        duration:2000,
        start: animation1 // launch animation1
        });
    }

    </script>

和html

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

Jquery幻灯片放映与Ken Burns效果

1 个答案: