Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Модератор форума: z-17, Anarki  
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Gold Page ((Золотая страничка))
Gold Page
FrostДата: Воскресенье, 23.05.2010, 22:09 | Сообщение # 1
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Оффлайн

Можно назвать это минишаблоном, но это скорее скрипт чем шаблон. Он позволит вам красиво представить свое портфолио, миниблог, визитку, небольшой каталог или на что хватит фантазии. Смотрится красиво.
Заинтригованы? Ну так давайте начнем.

1. jQuery
Для начала вставим вот этот код между тегами и (У тех, у кого сайты на uCoz вставлять не обязательно):

Code
<script type="text/javascript" src="http://s101.ucoz.net/src/u.js"></script>

Рассмотрим сам скрипт
Что бы его добавить, создайте текстовый файл с расширением .js (например gold.page.js)
И добавьте данную строчку между тегами <head> и </head>

Code
<script src="АДРЕС К СКРИПТУ" type="text/javascript"></script>

Code
jQuery(function(){
    function linkopt(a,b){
    $('.content div').fadeOut() //Исчезание открытого контента
    setTimeout(function(){$(a).fadeIn();},500) //Появление нового
    $('.menu').animate({top:'27px', left:'30px'}, "slow") //Передвижение меню влево
    $('.menu a').css({opacity: '.4'}) //При нажатии на ссылку остальные ссылки светлеют
    $('.bgblur').fadeOut() //Убирание размытия
    $('.black').fadeOut() //Убирание затемнения
    };
    $('body').ready(function(){
    setInterval(function(){
    $('.stars').animate({backgroundPosition: '+=200px -5px'}, 6000, 'linear') //Передвижение заднего фона со звездами
    $('.stars1').animate({backgroundPosition: '+=200px 5px'}, 2500, 'linear') //Передвижение среднего фона со звездами
    $('.stars2').animate({backgroundPosition: '+=200px 10px'}, 1000, 'linear') //Передвижение переднего фона со звездами
    }, 0)
    });
    $('.link1').click(function(){
    setTimeout(function(){
    $('.menu').animate({top:'155px', left:'270px'}, "slow") //При нажатии на главную будет возвращение меню в середину
    $('.bgblur').fadeIn() //появление размытия
    $('.black').fadeIn() //Появление затемнения
    },500)
    $('.menu a').css({opacity: '.4'}) //При нажатии на ссылку остальные ссылки светлеют
    $(this).css({opacity: '1.0'}) //Данная ссылка темнеет
    });

    $('.link2').click(function(){
    linkopt('.about'); //Появление div'a с указанным классом
    $(this).css({opacity: '1.0'}) //Данная ссылка темнеет
    });

    $('.link3').click(function(){
    linkopt('.blog'); //Появление div'a с указанным классом
    $(this).css({opacity: '1.0'}) //Данная ссылка темнеет
    });

    $('.link4').click(function(){
    linkopt('.order'); //Появление div'a с указанным классом
    $(this).css({opacity: '1.0'}) //Данная ссылка темнеет
    });

    $('.link5').click(function(){
    linkopt('.forum'); //Появление div'a с указанным классом
    $(this).css({opacity: '1.0'}) //Данная ссылка темнеет
    });

    $('.link6').click(function(){
    linkopt('.case'); //Появление div'a с указанным классом
    $(this).css({opacity: '1.0'}) //Данная ссылка темнеет
    });
});

Здесь ничего сложного нету, думаю разберетесь.

2. CSS

Code

body{background:#957400;background-position:0 0;background-size:600px;margin:0;font:12px Arial}
.body{width:700px;height:514px;background:url(img/ground.png);position:relative;left:23%}

.bgblur{position:absolute;width:100%;height:100%;background:url(img/ground-blur.png);z-index:0}
.black{position:absolute;width:100%;height:100%;background:#000;z-index:0;opacity:.5}

.stars{background:url(img/stars.png) repeat;}
.stars1{background:url(img/stars1.png) repeat;}
.stars2{background:url(img/stars2.png) repeat;}

.menu{position:relative;left:270px;top:155px;width:150px;text-align:center;float:left}
.menu a{display:block;height:20px;background:#786319;border:1px solid #2A2103;line-height:20px;margin:5px;text-decoration:none;font-size:10px;color:#000;opacity:.4;;border;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius: 2px;}
.menu a:focus{outline:0}

.content div {height:460px;width:480px;position:relative;top:25px;left:40px;overflow:auto;display:none}

3. HTML

Code
<html>
<head>
<title>Gold Page</title>
<!--[if IE]><style>*{display:none;}</style><[endif]-->
<link type="text/css" rel="StyleSheet" href="style.css" />

<script type="text/javascript" src="http://s22.ucoz.net/src/u.js"></script>
<script type="text/javascript" src="gold.page.js"></script>

</head>
<body><div class="stars"><div class="stars1"><div class="stars2"><div class="black"></div>
    <div class="body">
    <div class="bgblur"></div>
    <div class="menu">
    <a class="link1" style="opacity:1.0" href="javascript://">Главная</a>
    <a class="link2" href="javascript://">О бо мне</a>
    <a class="link3" href="javascript://">Блог</a>
    <a class="link4" href="javascript://">Заказать</a>
    <a class="link5" href="javascript://">Форум</a>
    <a class="link6" href="javascript://">Портфолио</a>
    </div>
    <div class="content">
    <div class="about">
    <!-- Содержимое -->
    </div>

    <div class="blog">
    <!-- Содержимое -->
    </div>

    <div class="order">
    <!-- Содержимое -->
    </div>

    <div class="forum">
    <!-- Содержимое -->
    </div>

    <div class="case">
    <!-- Содержимое -->
    </div>
    <div>
    </div>
</div></div></div>
</body>
</html>

Ну что то вроде того. Картинки в архиве...
Если кому понравилось, ставим плюс за изобретение =)
Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов
 
SleepWalkerДата: Понедельник, 24.05.2010, 23:06 | Сообщение # 2
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
хорошее изобретение)
Time Waits For No One
 
TenchickДата: Среда, 30.06.2010, 00:32 | Сообщение # 3
Рядовой
Сообщений: 15
Репутация: 0
Социальная репутация:

Статус: Оффлайн
а можно только одну страничку такой сделать?
 
SleepWalkerДата: Среда, 30.06.2010, 09:42 | Сообщение # 4
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
Tenchick, если ты не заметил, то тут код только для одной странички
Time Waits For No One
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Gold Page ((Золотая страничка))
  • Страница 1 из 1
  • 1
Поиск: