JavaScript - 从DropDown列表中选择元素时更改多个div

时间：2015-07-21 08:39:50

标签： javascript html css image fold

我有这个代码切片图片，然后模拟折叠效果。我有多个传单来测试它和一个包含传单名称的下拉列表。当我选择传单时，我想更改折叠的图片。我尝试了一些但不起作用，因为在我的代码中，每个切片都是另一张图片。

有人可以帮我这个吗？

以下是代码：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Accordion Fold</title>
    
    

    <script>

        var img = new Image();
        img.src = 'Flyer1pag1.png';

        function selectPicture(form) {
            var myindex = Pictures.dropPic.selectedIndex;
            if (Pictures.dropPic.options[myindex] != "0") {
                window.onload(Pictures.dropPic.options[myindex].value, target = "view");
            }
        }
        
        function scaleSize(maxW, maxH, currW, currH) {

            var ratio = currH / currW;

            if (currW >= maxW && ratio <= 1) {
                currW = maxW;
                currH = currW * ratio;
            } else if (currH >= maxH && ratio > 1) {
                currH = maxH;
                currW = currH / ratio;
            }

            return [currW, currH];
        }

        img.onload = function () {

            var imgWidth = this.width;
            var imgHeight = this.height;
            var newSize = scaleSize(800, 800, imgWidth, imgHeight);
            imgWidth = newSize[0];
            imgHeight = newSize[1];

            var Dim_View = document.querySelectorAll(".view");
            for (var i = 0; i < Dim_View.length; i++) {
                Dim_View[i].style.width = imgWidth + "px";
                Dim_View[i].style.height = imgHeight + "px";
                Dim_View[i].style.perspective = imgWidth * 0.7 + "px";
            }

            var Dim_Slice = document.querySelectorAll(".slice");
            for (var i = 0; i < Dim_Slice.length; i++) {
                Dim_Slice[i].style.width = imgWidth / 4 + "px";

            }
            var Poz_s1 = document.querySelectorAll(".s1");
            for (var i = 0; i < Poz_s1.length; i++) {
                Poz_s1[i].style.backgroundPositionX = '0px';
                Poz_s1[i].style.backgroundPositionY = '0px';
            }
            var Poz_s2 = document.querySelectorAll(".s2");
            for (var i = 0; i < Poz_s2.length; i++) {
                Poz_s2[i].style.backgroundPositionX = +imgWidth * 0.75 + "px";
                Poz_s2[i].style.backgroundPositionY = '0px';
            }
            var Poz_s3 = document.querySelectorAll(".s3");
            for (var i = 0; i < Poz_s3.length; i++) {
                Poz_s3[i].style.backgroundPositionX = +imgWidth * 0.5 + "px";
                Poz_s3[i].style.backgroundPositionY = '0px';
            }

            var Poz_s3 = document.querySelectorAll(".s3");
            for (var i = 0; i < Poz_s3.length; i++) {
                Poz_s3[i].style.backgroundPositionX = +imgWidth * 0.5 + "px";
                Poz_s3[i].style.backgroundPositionY = '0px';
            }
            var Poz_s4 = document.querySelectorAll(".s4");
            for (var i = 0; i < Poz_s4.length; i++) {
                Poz_s4[i].style.backgroundPositionX = +imgWidth * 0.25 + "px";
                Poz_s4[i].style.backgroundPositionY = '0px';
            }
        }

    </script>

    <style>
        .view {
            position: relative;
        }


            .view .slice {
                height: 100%;
                z-index: 100;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-transform-origin: left center;
                -moz-transform-origin: left center;
                -o-transform-origin: left center;
                -ms-transform-origin: left center;
                transform-origin: left center;
                -webkit-transition: -webkit-transform 1s ease-in-out;
                -moz-transition: -moz-transform 1s ease-in-out;
                -o-transition: -o-transform 1s ease-in-out;
                -ms-transition: -ms-transform 1s ease-in-out;
                transition: transform 1s ease-in-out;
                -webkit-backface-visibility: visible;
                -moz-backface-visibility: visible;
                -o-backface-visibility: visible;
                -ms-backface-visibility: visible;
                backface-visibility: visible;
            }

            .view s1, .view .s2, .view .s3, .view .s4 {
                -webkit-transform: translate3d(100%,0,0);
                -moz-transform: translate3d(100%,0,0);
                -o-transform: translate3d(100%,0,0);
                -ms-transform: translate3d(100%,0,0);
                transform: translate3d(100%,0,0);
            }

            .view:hover .s1 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
            }

            .view:hover .s2 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
            }

            .view:hover .s3 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);

            }

            .view:hover .s4 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
            }
    </style>
</head>
<body>
    <form name="Pictures">
        <select name="dropPic" onchange="selectPicture(this.Pictures)">
            <option value="Flyer1pag1.png">Flyer 1</option>
            <option value="Flyer2pag1.png">Flyer 2</option>
            <option value="Flyer3pag1.png">Flyer 3</option>
        </select>
    </form>
    <div class="view">
    <div class="slice s1" style="background-image: url(Flyer3pag1.png); background-size: cover; ">
        <div class="slice s2" style="background-image: url(Flyer3pag1.png); background-size: cover; ">
            <div class="slice s3" style="background-image: url(Flyer3pag1.png); background-size: cover; ">
                <div class="slice s4" style="background-image: url(Flyer3pag1.png); background-size: cover; ">
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

以下代码应修复您的错误

function selectPicture(imgSrc) {
    loadImage(imgSrc);
    var Dim_Slice = document.querySelectorAll(".slice");
    for (var i = 0; i < Dim_Slice.length; i++) {
        Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")";
    }   
}

function scaleSize(maxW, maxH, currW, currH) {
    var ratio = Math.min(maxW / currW, maxH / currH);
    return { width: currW*ratio, height: currH*ratio };
}

function loadImage (imgSrc) {
    var img = new Image();
    img.src = imgSrc;
    
    var newSize = scaleSize(800, 800, img.width, img.height);

    var Dim_View = document.querySelectorAll(".view");
    for (var i = 0; i < Dim_View.length; i++) {
        Dim_View[i].style.width = newSize.width + "px";
        Dim_View[i].style.height = newSize.height + "px";
        Dim_View[i].style.perspective = newSize.width * 0.7 + "px";
    }

    var Dim_Slice = document.querySelectorAll(".slice");
    for (var i = 0; i < Dim_Slice.length; i++) {
        Dim_Slice[i].style.width = newSize.width / 4 + "px";

    }
    var Poz_s1 = document.querySelectorAll(".s1");
    for (var i = 0; i < Poz_s1.length; i++) {
        Poz_s1[i].style.backgroundPositionX = '0px';
        Poz_s1[i].style.backgroundPositionY = '0px';
    }
    var Poz_s2 = document.querySelectorAll(".s2");
    for (var i = 0; i < Poz_s2.length; i++) {
        Poz_s2[i].style.backgroundPositionX = +newSize.width * 0.75 + "px";
        Poz_s2[i].style.backgroundPositionY = '0px';
    }
    var Poz_s3 = document.querySelectorAll(".s3");
    for (var i = 0; i < Poz_s3.length; i++) {
        Poz_s3[i].style.backgroundPositionX = +newSize.width * 0.5 + "px";
        Poz_s3[i].style.backgroundPositionY = '0px';
    }

    var Poz_s3 = document.querySelectorAll(".s3");
    for (var i = 0; i < Poz_s3.length; i++) {
        Poz_s3[i].style.backgroundPositionX = +newSize.width * 0.5 + "px";
        Poz_s3[i].style.backgroundPositionY = '0px';
    }
    var Poz_s4 = document.querySelectorAll(".s4");
    for (var i = 0; i < Poz_s4.length; i++) {
        Poz_s4[i].style.backgroundPositionX = +newSize.width * 0.25 + "px";
        Poz_s4[i].style.backgroundPositionY = '0px';
    }
}

window.onload = function() { 
    loadImage(document.Pictures.dropPic.options[0].value)
};
.view {
    position: relative;
}

.view .slice {
    height: 100%;
    z-index: 100;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    -ms-transition: -ms-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
}

.view s1, .view .s2, .view .s3, .view .s4 {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.view:hover .s1 {
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 60deg);
}

.view:hover .s2 {
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -70deg);
}

.view:hover .s3 {
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 70deg);
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 70deg);
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 70deg);
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 70deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 70deg);
}

.view:hover .s4 {
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -65deg);
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -65deg);
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -65deg);
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -65deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, -65deg);
}
<form name="Pictures">
    <select name="dropPic" onchange="selectPicture(this.value)">
        <option value="http://lorempixel.com/800/800/city/1/">Flyer 1</option>
        <option value="http://lorempixel.com/900/400/city/2/">Flyer 2</option>
        <option value="http://lorempixel.com/400/900/city/3/">Flyer 3</option>
    </select>
</form>
<script type="text/javascript">
    for (i = 0; i < document.Pictures.dropPic.options.length; i++) {
        var img = new Image();
        img.src = document.Pictures.dropPic.options[i].value;
    }
</script>
<div class="view">
    <div class="slice s1" style="background-image: url(http://lorempixel.com/800/800/city/1/); background-size: cover;">
        <div class="slice s2" style="background-image: url(http://lorempixel.com/800/800/city/1/); background-size: cover;  ">
            <div class="slice s3" style="background-image: url(http://lorempixel.com/800/800/city/1/); background-size: cover;  ">
                <div class="slice s4" style="background-image: url(http://lorempixel.com/800/800/city/1/); background-size: cover;  "></div>
            </div>
        </div>
    </div>
</div>

请注意我已在html中预装了图片

相关问题
最新问题