Где скачать CSS coverflow? - PullRequest
Новая
       10

Где скачать CSS coverflow?

0 голосов
/ 14 июня 2010

Это моя любимая обложка: http://paulbakaus.com/lab/js/coverflow/

Есть ли способ скачать это?Или есть руководство по реализации?

Все, что я вижу, - это некоторые сообщения в блоге, в которых ничего не говорится о том, как их реализовать.

Спасибо.

Ответы [ 2 ]

1 голос
/ 14 июня 2010

Как насчет загрузки всех скриптов в исходном коде? 

<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 голосов
/ 14 июня 2010

Вы просто ищете riiper сайта, который дублирует сайт на вашем ПК?Если это так, посмотрите здесь http://www.techsupportalert.com/best-free-web-site-ripper.htm (и посмотрите на этом сайте всегда лучшее в бесплатном ПО).

* CAVEAT * спросите владельца сайта перед копированием.

...