我最近一直在使用addsyomani coverflow,并试图找到一种在单击以显示一些附加细节时翻转图像的方法。例如,当您单击 cd-cover 时,它会翻转到 cd-cover 的背面。
有没有办法做到这一点?
谢谢你的时间,和你的帮助!
这是我的代码:
<!-- 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>