Я должен сделать веб-страницу, предназначенную для iPhone и iPod touch, которая должна включать стиль Coverflow для Apple на странице, чтобы отобразить список видео.Coverflow в HTML5 для iPhone/iPod Touch
Я слышал что-то о вещицах, которые могли бы помочь, но я не могу найти что-либо релевантное или что это может нормально работать с навигацией iPhone/iPod-Touch.
Кто-нибудь знает что-то, что может помочь мне начать работу?
Благодаря -Стефани
я в основном придерживаться родного развития App, так что я не знаю, есть ли существующая реализация крышки потока, но с помощью Dashcode Parts вы можете добавить некоторые более сложные элементы пользовательского интерфейса.
Это может помочь вам: http://paulbakaus.com/2008/05/31/coverflow-anyone/
Хотя это не кажется, что есть какой-либо официальный способ сделать это, потому что CSS преобразует только все 2D-матрицу, так что вы не можете получить форму трапеции.
Try ContentFlow: http://www.jacksasylum.eu/ContentFlow/
Вот пример, который работает на моем iPhone: http://www.majes.fr/
Вы можете попробовать XFlow! http://xflow.pwhitrow.com
я только что сделал это http://coulisse.luvdasun.com/
не уверен, если он работает на iphone/IPOD, я до сих пор, чтобы проверить, что
гр.
Это реализация кросс-браузер Cover Flow: http://luwes.co/labs/js-cover-flow/
Основной режим работы в HTML5 (JavaScript/CSS) и он имеет резерв для старых браузеров во flash. Он поддерживает мобильный телефон, вы можете перелистывать крышки с помощью простого жестового салфетки.
Проверено на: Safari, Chrome, Firefox, Opera, Internet Explorer 8 +, IPAD, iPhone
Это хорошая реализация, однако самым большим недостатком является то, что она не грамотно деградирует (отключить JavaScript и бум, без контента) и абсолютно недоступна для людей с ограниченными возможностями. Поскольку он использует внешний источник JSON, он также неприменим в CMS-генерируемых галереях, таких как Wordpress. Вместо разбора файла JSON было бы лучше стилизовать фигурные элементы в html. – KPM
Спасибо за отзыв. Не соблюдая внешний комментарий JSON, вы говорите, что невозможно создать файл JSON на сайте Wordpress? Тем не менее сценарий также позволяет встроенный JSON. – luwes
Вы можете попробовать это, я разработал специально для IOS устройств. Включен сенсорный жест. http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
Одинокая ссылка [считается плохим ответом] (http://stackoverflow.com/faq#deletion), поскольку она бессмысленна сама по себе, и целевой ресурс не гарантированно будет жить в будущем. [Было бы желательно] (http://meta.stackexchange.com/q/8259) включить здесь основные части ответа и предоставить ссылку для справки. – j0k
вы можете найти тонны Coverflow образцов в гугле , но все образцы, которые я нашел слишком сложные (много файлов или трудно осуществить), и они не дают то, что я искал так я решаю создать Coverflow
1.- меньше файлов
2.- легко реализовать
3.- Работает с Webkit (Safari, Safari Mobile и Chrome)
код, который я собираюсь показать только, чтобы дать вам подсказку того, что вы можете сделать с вашим проектом
это очень просто образец, который только показывает существенный это не последняя работа
это CoverFlow работает с входным диапазоном (слайдер) и вот его
Когда вы получите представление о том, как работает CoverFlow вы сможете добавить дополнительные функции cli CKS, прикасается, откидная крышка ....
Наконец вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CoverFlow</title>
<style>
html { height: 100%; }
body { background-image: -webkit-radial-gradient(gray 0%, black 100%); }
#coverflow {
width: 800px;
height: 400px;
overflow: hidden;
margin: 100px auto;
-webkit-perspective: 500;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
}
#container {
height: 100%;
width: 100%;
margin-left: 350px;
background-color: transparent;
-webkit-transition: all 400ms ease-in-out;
}
.holder {
float: left;
position: absolute;
margin-top: 100px;
margin-left: 20px;
-webkit-transition: all 300ms ease-in-out;
-webkit-box-reflect: below 4px
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(1, rgba(255, 255, 255, .3))
);
}
.slider {
position: absolute;
width: 200px;
height: 30px;
margin: 0 0 0 430px;
-webkit-appearance: none !important;
border-radius: 6px;
border: 1px solid white;
background: #999;
opacity: .5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 50px;
height: 18px;
border-radius: 8px;
border: 2px solid #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999), color-stop(.5, #000));
}
#log { color: white; font-size: 30pt; }
</style>
</head>
<body onload="flow()">
<div id="coverflow">
<div id="container">
<div class="holder" id="1"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="2"><img src="../img/2.jpg" width="200"></div>
<div class="holder" id="3"><img src="../img/3.jpg" width="200"></div>
<div class="holder" id="4"><img src="../img/4.jpg" width="200"></div>
<div class="holder" id="5"><img src="../img/5.jpg" width="200"></div>
<div class="holder" id="6"><img src="../img/6.jpg" width="200"></div>
<div class="holder" id="7"><img src="../img/7.jpg" width="200"></div>
<div class="holder" id="8"><img src="../img/8.jpg" width="200"></div>
<div class="holder" id="9"><img src="../img/9.jpg" width="200"></div>
<div class="holder" id="10"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="11"><img src="../img/2.jpg" width="200"></div>
</div>
</div>
<input id="slider" class="slider" type="range" min="1" max="11" value="6" onchange="flow();">
<a id="log">value</a>
<script>
function flow() {
var space = 2;
var coverCount = 11;
var current = slider.value;
var cover = document.getElementById(current + "");
var position = [0, 230, 180, 130, 80, 30, -20, -70, -120, -170, -220, -270];
for (var i = current; i < (coverCount +1); i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i+space)*50)+"px,0,-10px) rotateY(-65deg)";
document.getElementById(i + "").style.zIndex = -i + "";
}
for (var i = 1; i < current; i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i-space)*50)+"px,0,-10px) rotateY(65deg)";
document.getElementById(i + "").style.zIndex = i + "";
}
cover.style.webkitTransform = "translate3d("+(slider.value*50)+"px,0,100px) rotateY(0deg)";
cover.style.zIndex = current + "";
document.getElementById("container").style.marginLeft = position[current] + "px";
document.getElementById("log").innerHTML = slider.value + "";
}
</script>
</body>
</html>
я знаю, что вы можете найти много лучше coverflows это просто поделиться
Только не забудьте заменить путь изображения и/или имена
Надеется, что это помогает
Good Luck
Да, я вижу, что dashcode может легко добавлять более сложные элементы, но, к сожалению, ничто не указывает на то, что даже близко к потолку. У меня будет более глубокий взгляд, может быть, я смогу найти что-то, что понравится моему DA. Благодарю. – Stef