0
이것은 내가 좋아하는 커버 플로우입니다. http://paulbakaus.com/lab/js/coverflow/어딘가에 CSS 커버 플로우를 다운로드 하시겠습니까?
이 방법이 있습니까? 또는 구현 가이드가 있습니까?
내가보기에 구현 방법에 대한 정보가없는 블로그 게시물이 있습니다.
감사합니다.
A
답변
1
소스의 모든 스크립트를 다운로드하는 것은 어떻습니까?
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Coverflow featuring css transitions</title>
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
h1 {
margin: 20px;
}
p {
margin: 20px;
}
div.magnifyme {
height: 80px;
padding: 30px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 20px;
height: 160px;
border: 2px solid #999;
overflow: hidden;
width: 600px;
position: relative;
}
div.slider {
position: absolute;
bottom: 5px;
left: 30px;
width: 542px;
height: 19px;
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
}
div.ui-slider-handle {
position: absolute;
cursor: pointer;
cursor: hand;
top: 0px;
left: 0px;
height: 100%;
width: 181px;
background: url(handle.png) no-repeat;
}
div.magnifyme img {
width: 64px;
height: 64px;
float: left;
margin: 5px;
position: relative;
border: 1px solid #999;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.slider.js"></script>
<script type="text/javascript" src="effects.core.js"></script>
<script type="text/javascript" src="ui.coverflow.js"></script>
<script type="text/javascript" src="../transformie/sylvester.js"></script>
<script type="text/javascript" src="../transformie/pb.transformie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
});
</script>
</head>
<body>
<h1>Coverflow effect featuring CSS transformations and jQuery UI</h1>
<p>
This proof-of-concept shows a coverflow effect using the new CSS transformation feature from Webkit (featured in Safari 3.1). Needless
to say that it won't run in other browsers at this point (however, adapting it to canvas should be quite easy, and even now, it won't break in other browsers).
</p>
<p>
Unlike other demos, this one can truly animate between two half states, making a slider implementation like the iTunes slider really easy (will come
to this demo soon!). Have fun and try using the keyboard for hotness ;)
</p>
<div class="wrapper">
<div class="magnifyme">
<img src="icons/1.png" />
<img src="icons/2.png" />
<img src="icons/3.png" />
<img src="icons/4.png" />
<img src="icons/5.png" />
<img src="icons/6.png" />
<img src="icons/7.png" />
<img src="icons/8.png" />
<img src="icons/9.png" />
<img src="icons/10.png" />
<img src="icons/1.png" />
<img src="icons/2.png" />
<img src="icons/3.png" />
<img src="icons/4.png" />
<img src="icons/5.png" />
<img src="icons/6.png" />
<img src="icons/7.png" />
<img src="icons/8.png" />
<img src="icons/9.png" />
<img src="icons/10.png" />
</div>
<div class="slider">
<div class="ui-slider-handle"></div>
</div>
</div>
</body>
</html>
요소에서 <img> 요소 만 바꾸면 동일한 기능을 제공해야합니다. 스크립트 중 하나가 http://paulbakaus.com/lab/js/coverflow/ui.coverflow.js
0
@입니다 예를 들어
당신은 당신의 PC에 웹 사이트를 복제하는 사이트 riiper을 찾고 계십니까? 그렇다면 여기를 보시려면 http://www.techsupportalert.com/best-free-web-site-ripper.htm (그리고 그 사이트를 항상 무료로보실 수 있습니다).* CAVEAT * 리핑 전에 사이트 소유자에게 문의하십시오.
스크립트는 특별히 // This is DEMO PURPOSES ONLY라고 말합니다! – Mark
@ 마크 - 아마도 문서를 찾을 수없는 이유는 아마도 완성 된 제품이 아니라는 것입니다. –
꽤 잘 작동합니다. 라이센스 OS입니까? 누군가 그것을 풀어야한다. – Mark