|
В этом уроке будет рассказано, как создать красивый загибающийся уголок для страницы.
Вот как он будет выглядеть:
Демо
Разберем страницу: <html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="turn.js"></script>
<link rel="stylesheet" href="turn.css">
<script type="text/javascript">
$(document).ready(function(){
$('#target').fold();
});
</script>
</head>
<body>
|
Как вы видите надо разместить данный код на каждой странице где должен
быть загибающийся уголок.
Обязательно мы где-нибудь после тега <body> вставляем картинку, которая
должна скрываться за уголком и придаем ей id "target":
<img src="code.png" alt="©" name="target" id="target">
Данный уголок для страницы уникален тем, что в нем присутствуют множество
настроек. Ниже представлены описания каждой из них (все настройки
находятся в файле turn.js).
// Возможные настройки
var defaults = {
directory: '.',
// Папка в которой находится скрипт
side: 'right',
// поменятйе на "left" и картика будет слева
turnImage: 'fold-sw.png',
// картинка самого уголка
(если переместите уголок на другую сторону необходимо поменять
картинку уголка - также есть в архиве)
maxHeight: 400,
// Максиальная высота
startingWidth: 80,
// Высота и ширина
startingHeight: 80,
// разворота уголка (можно поменять, если хотите чтоб
уголок был более развернутым)
autoCurl: true
// если тут указать "false", тогда уголок будет
отгибаться только при перетаскивании мышкой
};
|
Ну вот и все! Теперь на Вашем сайте обязательно должен быть уголок, так как мы Вам предоставили целых 3 варианта на выбор. скачать исходник
[ Получить ссылку: ][
Скрыть ссылки
]
При копировании материала c web-stroytel.ucoz.com обратная ссылка обязательна!
| 
