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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

有没有办法做到这一点？

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

这里是我的代码：

<!-- 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>

回答：

检查我的小提琴; 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="/wp-content/uploads/new2022/20220327voicc/27145857.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翻转图像以显示一些细节 的全部内容， 来源链接： utcz.com/qa/266697.html

回到顶部