| tribatar | 11.04.2014 10:44 |
Вы меня не поняли, возможно моя вина, мне нужен не спойлер, а разворачивающийся свиток 
раскрывающиqся свиток, пример использования
Подскажите пожалуйста примеры сайтов или лучше сразу Js или css код для создания эффекта раскрывающихся свитка на сайте.
Без флеша, свиток представляет из себя некий div элемент который при клике должен плавно разворачиваться, но не просто в бок выезжать, а действительно разворачиваться. Уже весь нет перерыл, можно нонечно использовать новые свойства CSS для трансформации объектов, но это не подходит так как мало где будет работать |
tribatar,
Вы даже непредставляите столько сотен спойлеров этом форуме. |
Можете привести пример?
|
tribatar,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#fragment-1"><span>One</span></a>
</li>
<li>
<a href="#fragment-2"><span>Two</span></a>
</li>
<li>
<a href="#fragment-3"><span>Three</span></a>
</li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre>
<code>$( "#tabs" ).tabs(); </code>
</pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div><script>
$( "#tabs" ).tabs({collapsible: true ,show: { effect: "blind", duration: 800 }, hide: { effect: "blind", duration: 800 }});
</script>
</body>
</html>
|
Вы меня не поняли, возможно моя вина, мне нужен не спойлер, а разворачивающийся свиток
|
|
Вы хотите чтоб мы за вас анимацию развёртывания нарисовали? Губа не дура. Не зависимо от способа реализации - это вопрос далеко не пары строчек кода.
|
Я не прошу написать скрипт анимации за меня, я прошу помочь найти пример подобного свитка, пример http://codepen.io/thebabydino/pen/kugzo что то на подобии такого
|
Ну вот вы нашли, допиливайте для себя. И не смотрите что код коротенький - итоговый css портянка на 2000 строк. Наркоман какой-то это писал, имхо.)
|
Данная реализация основана на css следовательно заставить это работать на старых устройствах будет проблемно, предпочтительней js без новшеств css типа tranform rotate и прочего
|
| Часовой пояс GMT +3, время: 12:30. |