1. Акция на весь декабрь! Получай оплату х2 за уникальные статьи, объемом от 200 слов, если в заголовке темы и теле статьи присутствует слово Python
    Скрыть объявление

Start Page, Страница На Js

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем MrRockchip, 8 апр 2012.

  1. MrRockchip

    MrRockchip Гость

    Добрый день ! Помогите пожалуйста сделать Start Page на JavaScript . Приложил картинку как это должно выглядеть, при нажатии на правую кнопку меняется фон , при нажатии левой переадресация на др страницу .
    Также дело в том, что желательно сделать привязку к картинке ( если у человека маленький экран то картинки будут меньше и кнопки тоже должны уменьшиться .
    Пробовал сделать, но нечего не вышло, поскольку не знаю, как сделать так чтобы кнопка с картинкой были привязаны и как сделать, чтобы кнопка была выставлена по пиксельной позиции а не по команде centr и т.д.

    Размер изображения 1920х1080 размер каждой кнопки ~ 360х180 .
    Координаты кнопок : Первая кнопка ( слева относительно страницы ) верхний левый угол кнопки - y: 400 x: 90 нижний правый угол - y: 630 x: 450 ,
    Вторая кнопка ( справа относительно страницы ) верхний левый угол кнопки y: 400 x: 1220 нижний правый угол - y: 630 x: 1580
     

    Вложения:

    • 5454545455.png
      5454545455.png
      Размер файла:
      309,7 КБ
      Просмотров:
      161
  2. Bugnet

    Bugnet Гость

    Непонятно чего хотите на самом деле. Если размер изображения фиксированный и больше чем разрешение экрана, то о каком фоне идёт речь?
    У меня разрешение сейчас на компе 1280х1024 и картинка не влезет если задать и body такого же размера. Кнопки - аналогично.
    Чтобы картинки менялись в размерах относительно экрана - размер необходимо задавать в процентах. Чтобы фон был виден, то размер большой картинки должен быть меньше 100%. На левую кнопку вешаете просто ссылку на нужную страницу, на правую - клик по которому меняется фон страницы. Положение и размер картинок также непонятны. А если разрешение 800х600 ?

    Вы записали ряд противоречивых требований ...
     
  3. MrRockchip

    MrRockchip Гость

    Я имел в виду что картинка будет привязана к размеру окна браузера . то есть для вашего экрана она уменьшится . я указал размеры кнопок они будут прозрачными и по верх моего фона , чтобы было понятнее указал координаты в пиксилях на размере 1920 на 1080.
     
  4. Bugnet

    Bugnet Гость

    Всё равно много неясного. Если так, то выложу исходники: DEMO-страница

    Код (Text):
    <html >
    <head>
    <title>фон с кнопками</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/window.js"></script>
    </head>
    <body >
    <a href="http://targetcraft.ru/home"><img src="images/leftbutton.png" id="leftbutton" /></a>
    <img src="images/rightbutton.png" id="rightbutton" />
    </body>
    </html>
    Размеры и положение кнопок привязаны к разрешению экрана (jquery-скрипт - с именем "window.js"):
    Код (PHP):
    $(document).ready(function(){

    var wScr = screen.width;
    var hScr = screen.height;
    var w1 = wScr / 8;
    $('#leftbutton').attr('width',w1);
    $('#leftbutton').attr('height',w1);
    $('#leftbutton').css('top',w1);
    $('#leftbutton').css('left',w1);
    $('#rightbutton').attr('width',w1);
    $('#rightbutton').attr('height',w1);
    $('#rightbutton').css('top',w1);
    $('#rightbutton').css('right',w1);

    $('#rightbutton').toggle // двойной клик
    (
    function(){$('body').css({'background-image':'url(images/start2.png)'}) }, /*функция №1*/
    function(){$('body').css({'background-image':'url(images/start1.png)'}) }   /*функция №2*/
    );

    });//End ready
    Лист стилей

    Код (Text):
    body {
    margin 0 auto;
    border: none;
    width:100%;
    background-image:url(/images/start1.png);
    background-position:center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }
    #leftbutton{
    position: absolute;
    top:200;
    left:200;
    cursor: pointer;
    }
    #rightbutton{
    position:absolute;
    top:200;
    right:200;
    cursor: pointer;
    }
     
  5. MrRockchip

    MrRockchip Гость

    Огромное спасибо за оказанную помощь !!! Но если это возможно - сделать так чтобы при изменении размеров окна кнопки как и картинка на заднем плане сжимались одновременно и как одно целое и двигались только относительно сжатию картинки ( если к примеру взять данную демо страницу то при сжатии они двигаются по горизонтали и только по центру страницы - а я хотел чтобы кнопки были на месте и некуда не двигались с позиции по отношению к картинке пока окно браузера не станет изменятся ( то есть если окно браузера сжимается и вместе с этим картинка и кнопки )), ещё хочу добавить что если на жать на правую кнопку она может нажаться только один раз .
    Буду очень благодарен если вы окажите ещё маленькую помощь !
     
  6. Bugnet

    Bugnet Гость

    Очень плавно и пропорционально не получится, скорее всего. Я в примере использую метод изменения размера окна $(window).resize(function(){...., а размер может быть любой и + нужно время на отработку скрипта. В скрипте я ширину и высоту окна поделил на 7 (это чтобы по быстрому), а вообще-то нужно посчитать и посмотреть. Но даже так виден результат : DEMO-страница. Учите jQuery, это легко смотрите например здесь.

    В код скрипта window.js добавил ещё несколько строк:

    Код (LotusScript):
    $(window).resize(function(){
    var izmW = $(document).width();
    var izmH = $(document).height();

    var izmW = izmW/7;
    $('#leftbutton').attr('width',izmW);
    $('#leftbutton').css('left',izmW);
    $('#rightbutton').attr('width',izmW);
    $('#rightbutton').css('right',izmW);

    var izmH = izmH/7;
    $('#leftbutton').attr('height',izmH);
    $('#leftbutton').css('top',izmH);
    $('#rightbutton').attr('height',izmH);
    $('#rightbutton').css('top',izmH);

    });//END resize
    Если помог плюсуйте репутацию.
     
  7. MrRockchip

    MrRockchip Гость

    Да да именно так при изменении размера окна вот только кнопки немного выше становятся =( . Добавь меня к себе в скайп я тебе скину картинку которая будет может так легче будет помочь мне .
     
  8. Bugnet

    Bugnet Гость

    :( Нет уж - это без меня. Скайпом не пользуюсь. Я дал "удочку" ловите "рыбку" сами. Я уже сказал, что поделил на 7, а вы подберите (посчитайте) отдельно переменную позиционирования по высоте для

    Код (LotusScript):
    $('#leftbutton').css('top',izmH);
    $('#rightbutton').css('top',izmH);
    Например так
    var topizmH = izmH *1,1; // отступ сверху увеличил в 1,1 раза

    Код (LotusScript):
    $('#leftbutton').css('top',topizmH);
    $('#rightbutton').css('top',topizmH);
     
  9. MrRockchip

    MrRockchip Гость

    Может хотябы чуток поможешь и буду очень очень очень благодарен =))) приложил картинку точно идентичную фону - кнопки на самом деле будут прозрачными =)))))
    43534534534675.jpg

    Добавлено: Если я тебя всё ещё не сильно напрягаю ты бы не мог объединить то что ты добавил и то что было до этого в одно целое ? :(
     
  10. Bugnet

    Bugnet Гость

    Прежде чем читать пост - кликай за каждый полезный совет "+" в репутацию пользователя
    Ну как-то так . Идеально не выходит, но приблизительно. Оставил нарисованные кнопки - чтобы отследить перемещение "реальных" кнопок. Есть и проблемное место- если окно уменьшить, а потом перегрузить, то сработает участок кода, который отвечает за первоначальное местоположение кнопок. Думаю, это не проблема - немногие будут так "насиловать" страничку.
    Код скрипта такой:

    Код (LotusScript):
    $(document).ready(function(){

    var wScr = screen.width;
    var hScr = screen.height;
    var w1 = wScr/5.8;
    var h1 = hScr/9;
    var hTOP = hScr/2.71;
    var wLR = wScr/10.8;

    $('#leftbutton').attr('width',w1);
    $('#leftbutton').attr('height',h1);
    $('#leftbutton').css('top',hTOP);
    $('#leftbutton').css('left',wLR);
    $('#rightbutton').attr('width',w1);
    $('#rightbutton').attr('height',h1);
    $('#rightbutton').css('top',hTOP);
    $('#rightbutton').css('right',wLR);

    $('#rightbutton').toggle // двойной клик
    (
    function(){$('body').css({'background-image':'url(images/fon2.jpg)'}) }, /*функция №1*/
    function(){$('body').css({'background-image':'url(images/fon1.jpg)'}) }  /*функция №2*/
    );//END toogle

    $(window).resize(function(){
    var wScr = $(document).width();
    var hScr = $(document).height();
    var w1 = wScr/5.8;
    var h1 = hScr/9;
    var hTOP = hScr/2.2;
    var wLR = wScr/10.8;

    $('#leftbutton').attr('width',w1);
    $('#leftbutton').attr('height',h1);
    $('#leftbutton').css('top',hTOP);
    $('#leftbutton').css('left',wLR);
    $('#rightbutton').attr('width',w1);
    $('#rightbutton').attr('height',h1);
    $('#rightbutton').css('top',hTOP);
    $('#rightbutton').css('right',wLR);

    });//END resize


    });//End ready
     
  11. MrRockchip

    MrRockchip Гость

    Да вот дело тоже в этом , кликаю тебе на плюс а он не плюсуется ;) < после этого текста у меня сразу получилось плюсануть возможно тут стоит запрет на плюсы от юзеров у которых сообщений менее ... кол-ва . Я очень тебе благодарен , если есть какие ещё способы поблагодарить тебя может плюсануть где нибудь ещё и т.д. ты скажи я сделаю =)
     
  12. MrRockchip

    MrRockchip Гость

    Слушай, а ты случайно не знаешь как поместить этот код на главную страницу Joomla 2.5 ? А то не получается найти, как там код страницы редактировать. :eek:
    (и, на будущее: сложно ли этот код перевести на PHP)
     
  13. Bugnet

    Bugnet Гость

    С Joomla я не в курсе, установил как-то с ознакомительной целью. На PHP это перевести невозможно. PHP не для этого создан, это серверный язык и ему "по-барабану", что пользователь делает со своим браузером. Даже если отвлечься и пофантазировать - то не рационально подобное, "каждое движение мышки" отправлять на обработку на сервер, при этом страница перегружается заново.
     
  14. MrRockchip

    MrRockchip Гость

    А может на html будет проще ?
     
Загрузка...
Похожие Темы - Start Page Страница
  1. frII
    Ответов:
    3
    Просмотров:
    551
  2. NickProstoNick
    Ответов:
    0
    Просмотров:
    702
  3. ruivit
    Ответов:
    2
    Просмотров:
    1.023
  4. Skellar
    Ответов:
    9
    Просмотров:
    7.302
  5. malor
    Ответов:
    5
    Просмотров:
    6.697

Поделиться этой страницей