Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
1

Постепенное увеличение размера дива и размера шрифта вложенного текста

06.11.2014, 14:04. Просмотров 1675. Ответов 8
Метки нет (Все метки)

Имеется див с текстом внутри.
Как сделать, чтобы при загрузке страницы на экране было сначало пусто, т.е. размер дива и текста 0.
Потом надо, чтобы див с текстом постепенно увеличивался.
Т.е. надо увеличить масштаб.
Как это сделать?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.11.2014, 14:04
Ответы с готовыми решениями:

Постепенное увеличение размера шрифта кнопками масштаба
Подскажите где ошибка $(function () { var fontStateP = 0; var fontStateM = 0; ...

Увеличение размера шрифта
Хочу написать свой текстовый редактор только начал по этому все пусто. Есть выпадающий список с...

Увеличение размера шрифта
Доброго времени суток. Подскажите пожалуйста, как увеличить шрифт на Flash сайте?

Автоматическое увеличение размера шрифта
Здравствуйте. Как сделать так, чтобы при просмотре сайта с мобильных устройств, в случае, если...

8
34 / 34 / 26
Регистрация: 27.05.2012
Сообщений: 204
06.11.2014, 16:56 2
HTML5
1
2
3
4
<style>
#di{width:0px; height:0px; font-size:0px; border:1px solid #232021;}
</style>
<div id="di">Некий текст</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var d=document.getElementById("di"),max_font=40,max_width=400, max_height=70,kill1=false,kill2=false,kill3=false,
w,h,f;
var int=setInterval(function()
{
    if(parseInt(getComputedStyle(d).width)<max_width)
    {
        w=parseInt(getComputedStyle(d).width)+10;
        d.style.width=w+"px";
    }else{kill1=true}
    if(parseInt(getComputedStyle(d).height)<max_height)
    {
        h=parseInt(getComputedStyle(d).height)+2;
        d.style.height=h+"px";
    }else{kill2=true}
    if(parseInt(getComputedStyle(d).fontSize)<max_font)
    {
        f=parseInt(getComputedStyle(d).fontSize)+1;
        d.style.fontSize=f+"px";
    }else{kill3=true}
    
    if(kill1===true && kill2===true && kill3===true)clearInterval(int);
},50);
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
06.11.2014, 23:48  [ТС] 3
у меня что-то не работает вышеприведённый код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1</title>
  <style>
      #di {
        width:0px; height:0px; font-size:0px; border:1px solid #232021;
    }
</style>
 
<script>
    var d=document.getElementById("di");
    var max_font=40, max_width=400, max_height=70,kill1=false,kill2=false,kill3=false,w,h,f;
 
    function func(){
        if(parseInt(getComputedStyle(d).width)<max_width)
        {
        // alert(getComputedStyle(d).width);
        w=parseInt(getComputedStyle(d).width)+10;
        d.style.width=w+"px";
    }else{kill1=true}
    if(parseInt(getComputedStyle(d).height)<max_height)
    {
        h=parseInt(getComputedStyle(d).height)+2;
        d.style.height=h+"px";
    }else{kill2=true}
    if(parseInt(getComputedStyle(d).fontSize)<max_font)
    {
        f=parseInt(getComputedStyle(d).fontSize)+1;
        d.style.fontSize=f+"px";
    }else{kill3=true}
 
    if(kill1==true && kill2==true && kill3==true) clearInterval(interval);
 
}
var interval=setInterval(func,50);
 
</script>
</head>
<body>
 
    <div id="di">Некий текст</div>
 
</body>
</html>
0
супермизантроп
Эксперт JS
3719 / 2855 / 677
Регистрация: 18.04.2012
Сообщений: 8,443
06.11.2014, 23:56 4
phpk, весь скриптовой блок (строки 12-39 вашего кода) поместите между строками 44 и 45
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
07.11.2014, 00:02  [ТС] 5
А что это было?
Т.е. почему так влияет расположение <script> ?
Благодарю за подсказку кстати
0
супермизантроп
Эксперт JS
3719 / 2855 / 677
Регистрация: 18.04.2012
Сообщений: 8,443
07.11.2014, 00:15 6
Цитата Сообщение от phpk Посмотреть сообщение
почему так влияет расположение <script> ?
браузер прочитывает (и исполняет) код построчно, сверху вниз

когда он читает строку, где написано var d=document.getElementById("di");, браузер уже должен знать, всё про тег с id="di", а в вашем варианте строка <div id="di">Некий текст</div> находится значительно ниже и браузер до неё еще "не дочитал"
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
07.11.2014, 00:19  [ТС] 7
просто где-то читал, что скрипт рекомендуется применять в заголовке <head>
0
супермизантроп
Эксперт JS
3719 / 2855 / 677
Регистрация: 18.04.2012
Сообщений: 8,443
07.11.2014, 00:27 8
Цитата Сообщение от phpk Посмотреть сообщение
просто где-то читал, что скрипт рекомендуется применять в заголовке <head>
можно и в заголовке, но тогда весь код надо обернуть в функцию, запускаемую по событию onload


итак:
-- либо <тег> и ниже него <script>js-код, где происходит обращение к этому тегу</script>

-- либо <script>onload = function () {js-код, где происходит обращение к тегу}</script>
и потом в любом месте <тег>

PS скрипт-код, размещённый в заголовке, исполнится обязательно, в отличие от скрипт-кода, размещённого в ином месте страницы, поэтому и рекомендуется
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
07.11.2014, 00:43  [ТС] 9
скрипт-код, размещённый в заголовке, исполнится обязательно, в отличие от скрипт-кода, размещённого в ином месте страницы
не поймите за настырность, но из вашего последнего высказывания я понял, что скрипт, расположеный вне заголовка не обязательно выполнится. В каких случаях он не выполнится?
Просто на начальном этапе изучения JS для меня важна каждая мелочь.
Ведь браузер все равно дойдет до скрипта, как в вышеприведенном коде!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.11.2014, 00:43

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

Увеличение и уменьшение размера шрифта метки
Найдите пожалуйста ошибку. Программа не работает. unit Unit1; interface uses Windows,...

Увеличение размера шрифта с увеличением контейнера
&lt;div class=&quot;block&quot;&gt; &lt;div class=&quot;stepArticle&quot;&gt; &lt;p class=&quot;text&quot;&gt;info&lt;/p&gt; ...

Увеличение размера шрифта в окне свойств
как увеличить размер шрифта в окне свойств в Visual Studio?

Увеличение размера шрифта Label на единицу в таймере
на форме есть лейбл,таймер и кнопка. при нажатии кнопки срабатывает таймер и увеличивает размер...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.