Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Плавный спад 
:(
    Опции темы
neoks
Дата 13.8.2011, 13:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Хочу сделать плавное уменьшение блоков, не знаю как сделать, пробовал разные методы не получается.

Вот картинка как должно получится.
user posted image

Нужна магическая формула  smile  которою я не знаю, мне просто нужна формула для плавного перехода.
Я пробовал просто плюсовать но это не вариант.

За раннее спасибо!.
PM MAIL   Вверх
Amphiluke
Дата 13.8.2011, 14:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



С jQuery и формула не нужна. Достаточно координат конечной позиции центра.
Например:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#close").click(function() {
        $(".chld").animate({
            "width":"0px",
            "height":"0px",
            "left":"550px",
            "top":"400px"
        }, 1500, function() { $(".chld").hide(); });
    });
});
</script>
<style type="text/css">
    .prnt { position:relative; width:600px; height:450px; border:1px solid; background:#FC6; }
    .chld { position:absolute; width:200px; height:150px; border:1px solid; background:#3C9; top:10px; left:10px; }
    #close { text-decoration:none; float:right; margin-right:10px; }
</style>
</head>
<body>
    <div class="prnt">
        <div class="chld">
            <a id="close" href="#">&times;</a>
        </div>
    </div>
</body>
</html>


PM   Вверх
neoks
Дата 13.8.2011, 15:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Черт, все время как не задам вопрос меня не правильно понимают  smile 
Я имел ввиду другое, мне нужно выставить див блоки так как на картинки, на картинки я обвел контуром чтоб было видно какого размер блока и где расположен.
Проблема в том что если плюсовать например width+=20 то получается не красиво, они уменьшаются как ступеньки.

А мне нужно как на картинки, знаю что это можно сделать но в математики я полный 0)).

Добавлено через 57 секунд
На картинки видно чем они дальше тем меньше между ними расстояние.
PM MAIL   Вверх
Amphiluke
Дата 13.8.2011, 15:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



А, понятно.  smile 

Значит, вам нужно найти точку схода 4-х линий, проходящих через углы всех прямоугольников.
Далее, имея координаты углов первого прямоугольника и координаты точки схода можно вычислить уравнения 4-х прямых, которым будут принадлежать точки углов всех прямоугольников.
Уравнение прямой, проходящей через 2 точки имеет вид
user posted image
В вашем случае точка схода (скажем, (x2, y2)) будет одна для всех 4-х прямых, а точки (x1, y1) соответственно будут координатами каждого из 4-х углов первого (ближнего) прямоугольника.
Затем, вы вычисляете, скажем, координату Y угла второго прямоугольника, вычтя из из координаты того же угла первого прямоугольника заранее известное значение ΔY (например, 20). Подставив полученное значение Y в уравнение прямой находите X, а по нему — значение Y другого угла и так далее.
 smile  smile 
PM   Вверх
neoks
Дата 13.8.2011, 16:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



 smile   не черта не понял  smile  чаво ?  smile 
PM MAIL   Вверх
Amphiluke
Дата 13.8.2011, 16:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



 smile 
Ладно. Попробую набросать пример через N минут.
PM   Вверх
Amphiluke
Дата 13.8.2011, 17:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



Мдя. Вот такой примерчик получился…  smile 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
    html, body { background:#000; color:#fff; }
    .rect { border:1px dashed #fff; position:absolute; left:20px; top:50px; width:400px; height:350px; }
</style>
<script type="text/javascript">
    function setVanishingPoint(e) {
        if (!e) e = event;
        var vp = { x: e.clientX, y: e.clientY },
            rects = document.getElementsByClassName("rect"),
            corn = {
                leftTop:     { x: rects[0].offsetLeft, y: rects[0].offsetTop },
                rightTop:    { x: rects[0].offsetLeft + rects[0].offsetWidth, y: rects[0].offsetTop },
                rightBottom: { x: rects[0].offsetLeft + rects[0].offsetWidth, y: rects[0].offsetTop + rects[0].offsetHeight },
                leftBottom:  { x: rects[0].offsetLeft, y: rects[0].offsetTop + rects[0].offsetHeight }
            },
            koefs = {
                leftTop: {
                    k: (vp.y - corn.leftTop.y) / (vp.x - corn.leftTop.x),
                    b: corn.leftTop.y - corn.leftTop.x * (vp.y - corn.leftTop.y) / (vp.x - corn.leftTop.x)
                },
                rightTop: {
                    k: (vp.y - corn.rightTop.y) / (vp.x - corn.rightTop.x),
                    b: corn.rightTop.y - corn.rightTop.x * (vp.y - corn.rightTop.y) / (vp.x - corn.rightTop.x)
                },
                rightBottom: {
                    k: (vp.y - corn.rightBottom.y) / (vp.x - corn.rightBottom.x),
                    b: corn.rightBottom.y - corn.rightBottom.x * (vp.y - corn.rightBottom.y) / (vp.x - corn.rightBottom.x)
                },
                leftBottom: {
                    k: (vp.y - corn.leftBottom.y) / (vp.x - corn.leftBottom.x),
                    b: corn.leftBottom.y - corn.leftBottom.x * (vp.y - corn.leftBottom.y) / (vp.x - corn.leftBottom.x)
                }
            },
            dy = (corn.leftTop.y - vp.y) / rects.length,
            curCorn = {
                leftTop:     { x: 0, y: 0 },
                rightTop:    { x: 0, y: 0 },
                rightBottom: { x: 0, y: 0 },
                leftBottom:  { x: 0, y: 0 }
            };
        for (var i = 1; i < rects.length; i++) {
            curCorn.leftTop.y = curCorn.rightTop.y = corn.leftTop.y - i * dy;
            curCorn.leftTop.x = curCorn.leftBottom.x = (curCorn.leftTop.y - koefs.leftTop.b) / koefs.leftTop.k;
            curCorn.leftBottom.y = curCorn.rightBottom.y = koefs.leftBottom.k * curCorn.leftBottom.x + koefs.leftBottom.b;
            curCorn.rightTop.x = curCorn.rightBottom.x = (curCorn.rightTop.y - koefs.rightTop.b) / koefs.rightTop.k;
            rects[i].style.left = curCorn.leftTop.x + "px";
            rects[i].style.top = curCorn.leftTop.y + "px";
            rects[i].style.width = (curCorn.rightTop.x - curCorn.leftTop.x) + "px";
            rects[i].style.height = (curCorn.leftBottom.y - curCorn.leftTop.y) + "px";
        }
    }
    document.documentElement.onclick = setVanishingPoint;
</script>
</head>
<body>
    <p>Щелкните в любом месте страницы, чтобы задать точку схода</p>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
</body>
</html>


Добавлено @ 17:41
За кроссбраузерностью не гнался (если что, потом можно избавиться от метода getElementsByClassName), главное — суть.

Это сообщение отредактировал(а) Amphiluke - 13.8.2011, 17:43
PM   Вверх
neoks
Дата 13.8.2011, 18:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Блин, да что ж такое, наверно не правильно объясняю  smile 
Не то, мне не нужно не каких точек схода  smile , мне нужно чтоб расстояние между блоками на конце плавно уменьшалось как кривая.

user posted image

Я раньше делал полуэкликпс, мне тогда дали маленькую формулу, спасибо работает сейчас можно ее увидеть на сайте sl-system.com в интерфейсе и в админке.

Прошлый раз я с этой формулой навазился конкретно.  smile 

Сейчас пытаюсь с интерфейса выдернуть, но пока результат не впечатляет.  smile 
PM MAIL   Вверх
rodnover
Дата 13.8.2011, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 223
Регистрация: 7.4.2009

Репутация: нет
Всего: 10



Так сначала нужно определиться как какая именно кривая должно уменьшаться расстояние (парабола, гипербола, экспонента и т.д.).

P.S. Правильно поставленный вопрос -- половина решения задачи.
PM MAIL   Вверх
neoks
Дата 13.8.2011, 20:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Почти собрал, осталось добить до конца.
Код


var k = 0.7;

$.each(find_block, function(i){
x = k*((i-1)/d - 1);
                
x = Math.sqrt(1-x*x)*2200-(1000 + 500)

 $('.'+options.block).eq(i).css({left:x,height:height_b,bottom:bottom_b,zIndex:zIndex_b,width:width_b});

});


Вот тут мне не нравится *2200-(1000 + 500), 500 - ширина блока, 1000 - походу ширина контейнера.
Не совсем понимаю как сделать автоматом, например указал ширину контейнера и ширину блока и формула сама все подставила.  smile

Добавлено через 8 минут и 14 секунд
Забыл.
Код

d = Math.floor((7).toFixed(1));


7- количество элементов
PM MAIL   Вверх
neoks
Дата 13.8.2011, 21:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Задалбался я с этой формулой  smile , наверно сделаю проше, сделаю лимит так 5-7 и каждому номеру в переменных напишу свою позицию.
PM MAIL   Вверх
neoks
Дата 14.8.2011, 12:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Все решил сделать проще, сделал лимит 7 и каждому блоку присвоил позицию.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0570 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.