Question

我最近一直在使用addsyomani coverflow，并试图找到一种方法来点击图片，以显示一些额外的细节。例如，当您单击CD封面时，它将翻转到CD封面的背面。

有没有办法做到这一点？

谢谢你的时间和你的帮助!!

这是我的代码：

<!-- Include theme -->
<link type="text/css" href="../../Content/jquery-ui-1.10.1.custom.css" rel="Stylesheet" />

<!-- Include jQuery and UI -->
<script type="text/javascript" src="../../Scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.9.custom.min.js"></script>


<!-- Include jQuery CoverFlow widget -->
<script type="text/javascript" src="../../Scripts/ui.coverflow.js"></script>

<link type="text/css" href="../../Content/carrousel.css" rel="stylesheet" />

<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer -->
<script src="../../Scripts/sylvester.js" type="text/javascript"></script>
<script src="../../Scripts/transformie.js" type="text/javascript"></script>

<!-- Include mousewheel dependancies and app files -->
<script src="../../Scripts/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="../../Scripts/app.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

    var demo = {

        yScroll: function (wrapper, scrollable) {

            var wrapper = $(wrapper), scrollable = $(scrollable),
                loading = $('<div class="loading">Loading...</div>').appendTo(wrapper),
                internal = null,
                images = null;
            scrollable.hide();
            images = scrollable.find('img');
            completed = 0;

            images.each(function () {
                if (this.complete) completed++;
            });

            if (completed == images.length) {
                setTimeout(function () {
                    loading.hide();
                    wrapper.css({ overflow: 'hidden' });
                    scrollable.slideDown('slow', function () {
                        enable();
                    });
                }, 0);
            }

            function enable() {
                var inactiveMargin = 99,
                    wrapperWidth = wrapper.width(),
                    wrapperHeight = wrapper.height(),
                    scrollableHeight = scrollable.outerHeight() + 2 * inactiveMargin,
                    wrapperOffset = 0,
                    top = 0,
                    lastTarget = null;

                wrapper.mousemove(function (e) {
                    lastTarget = e.target;
                    wrapperOffset = wrapper.offset();
                    top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
                    if (top < 0) {
                        top = 0;
                    }
                    wrapper.scrollTop(top);
                });
            }
        }
    }
    demo.yScroll('#scroll-pane', 'ul#sortable');
});
</script>

<h2>Covers</h2>

<div class="pageWrapper">
<div class="demo" style="position:relative">
    <div class="wrapper">
        <ul>
            <div id="coverflow">
                <img src="/Cover/GetCover/ironmaidenFotD_FRONT.jpg" data-artist="Iron Maiden" data-album="Fear of the Dark" />
                <img src="/Cover/GetCover/ironmaidenFotD_BACK.jpg" data-artist="Iron Maiden" data-album="Fear of the Dark" />
            </div>
        </ul>
    </div>

    <div id="imageCaption">
    Sample Text
    </div>


    <div id='slider'></div>
</div>


<div class="demo-description">
</div>

<div class="listholder" style="display:none">

    <div id="scroll-pane">
        <ul id="sortable">
        </ul>
    </div>
</div>

Answer 1

检查我的小提琴; http://jsfiddle.net/Allendar/uK5av/

没有JavaScript''所有'需要：）

<强> HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />
            </div>
            <div class="back face center">
                Some text inside here
            </div>
        </div>
    </div>
</body>
</html>

<强> CSS

#f1_container {
    position: relative;
    margin: 10px auto;
    width: 450px;
    height: 281px;
    z-index: 1;
}
#f1_container {
    -webkit-perspective: 1000;
    perspective: 1000;
}
#f1_card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-shadow: -5px 5px 5px #aaa;
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-color: #aaa;
}

使用ui-coverflow翻转图像以显示一些细节

1 个答案: