Работающее анимированное облако тегов
Все ставится в HTML-верх, то, что красным, меняем на свое
<!-- Облако тегов -->
<style>
#myCanvasContainer {
position:absolute;
top:420px; // отступ сверху
margin-left:-120px; // отступ слева
z-index:1000;
}
</style>
Туда, где надо поставить облако
<div class="container">
<script src="http://forumstatic.ru/files/0012/9a/62/83443.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(!$('#myCanvas').tagcanvas({
textColour: '#d12008', // цвет текста
textHeight: 20, // размер текста
outlineColour: '#9605e9', // цвет границы выбранного элемента
reverse: true,
depth: 0.8,
clickToFront: 10,
freezeDecel: true,
initial: [0.3,-0.1],
weight: true,
maxSpeed: 0.05 // скорость вращения
},'tags')) {
// something went wrong, hide the canvas container
$('#myCanvasContainer').hide();
}
});
</script>
<div id="myCanvasContainer">
<canvas width="300" height="200" id="myCanvas"> // размеры канвы (облака)
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="Адрес ссылки 1" target="_blank">Название ссылки 1</a></li>
<li><a href="Адрес ссылки 2" target="_blank">Название ссылки 2</a></li>
<li><a href="Адрес ссылки 3" target="_blank">Название ссылки 3</a></li>
<li><a href="Адрес ссылки 4" target="_blank">Название ссылки 4</a></li>
</ul>
</div>
</div>
Пример: http://overside.rolbb.ru/
Отредактировано Mirra Bell (Вс, 13 Янв 2019 19:45:16)