Загибающийся уголок страницы сайта - Дизайн - создаем - Каталог статей - Создай свой сайт
Приветствую Вас ГостьПонедельник, 26.02.2018, 00:43

web-stroytel


Каталог статей

Главная » Статьи » создаем » Дизайн

Загибающийся уголок страницы сайта


В этом уроке будет рассказано, как создать красивый загибающийся уголок для страницы.

Вот как он будет выглядеть:


Демо


Разберем страницу:

<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="&copy;" 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 варианта на выбор.

скачать исходник





[ Получить ссылку: ]
Категория: Дизайн | Добавил: DEVIL009 (16.10.2009)
Просмотров: 2562 | Рейтинг: 5.0/2 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Регистрация
Категории
Html [1]
Не знание html – это постоянный тормоз, который будет преследовать на протяжении всей работы с сайтом, которая вовсе не ограничивается только его созданием.
CSS [0]
Каскадные таблицы стилей и все, что с ними связано.
CMS системы [3]
Почти самый простой способ создать сайт - воспользоваться CMS.
Дизайн [8]
Учимся на профессиональных web-дизайнеров!
Общее [10]
Все быстро, качественно и с нуля.
ucoz и другое [22]
Все, что может помочь в освоении этой CMS.
flash [11]
photoshop [4]
Поиск
Опрос:
Оцените мой сайт
Всего ответов: 73
Друзья
Rambler's Top100
партнеры

Внимание!!
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0



 При копировании материалов ссылка на источник обязательна.
 Если какой либо материал нарушает ваше авторское право, то пожалуйста обратитесь к администрации через ЛС.
 Шаблон защищен авторским правом. подробнее