Показать сообщение отдельно
  #1 (permalink)  
Старый 21.08.2013, 18:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

jQuery плагин для увеличения/уменьшения шрифта
плагин умеет увеличивать уменьшать размер шрифта в заданном диапазоне и возвращать исходное значение
добавлено: опция - нераспространять параметры шрифта на указаннных потомков
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  $.fn.zoomtext = function (c) {
    var a = {
        min: 8, //минимальный размер шрифта  - 0 без ограничения
        max: 32, //максимальный размер шрифта - 0 без ограничения
        increment: "+=1", //приращение или размер например "24px"
        recovery: !1, //вернуть исходный размер
        skip: !1  //нераспространять параметры шрифта на этих потомков  - селектор потомков "*"
    }, a = $.extend(a, c);
    c = $("*", this).add(this);
    c.each(function (a, c) {
        var b = $(this).css("fontSize");
        !$(this).data("fontSize") && $(this).data("fontSize", b).css("fontSize", b)
    });
    a.skip && (c = c.not($(a.skip, this)));
    return c.each(function (c, d) {
        var b = $(this).css("fontSize"),
            b = $("<div/>", {
                css: {
                    fontSize: b
                }
            }).css("fontSize", a.increment).css("fontSize");
        a.max && parseFloat(b) > a.max && (b = a.max);
        a.min && parseFloat(b) < a.min && (b = a.min);
        a.recovery && (b = $(this).data("fontSize"));
        $(this).css({
            fontSize: b
        })
    })
};
   $(function()
     {
       $('#increase').click(function(event)
         {event.preventDefault();
         $('#content').zoomtext({increment: "+=1"});
         }
       );

       $('#reset').click(function(event)
         {event.preventDefault();
         $('#content').zoomtext({recovery: true});
         }
       );

      $('#decrease').click(function(event)
         {event.preventDefault();
         $('#content').zoomtext({increment: "-=3"});
         }
       );
      $('#font24').click(function(event)
         {event.preventDefault();
         $('#content').zoomtext({increment: "24px"});
         }
       );
       $('#increase_мах').click(function(event)
         {event.preventDefault()
         $('#content').zoomtext({increment: "+=5", max : 0,skip : '*'});
         }
       );



     }
   )
  </script>
</head>

<body>
<p id="content">
Бесплатный гороскоп на сегодня 08.08.2011 для Тельца:<br /><a href="#">123456</a>
Для всех Тельцов это день максимальной активности, время, когда стоит быть энергичными в самых обыденных делах, придавая им цельность и гармонию. Не стоит упускать возможности воспользоваться чьими-то предложениями, которые могут оказаться весьма выгодными и полезными. Контакты с коллегами по работе или родственниками у Тельцов будут теплыми, приносящими успех и удовлетворение. Правда, при этом не стоит проявлять чрезмерной принципиальности в вопросах, касающихся профессиональной деятельности, так как это чревато возможными конфликтами.
</p>
<ul id="zoom">
			<li><a href="#zoom" id="increase" title="увеличить шрифт">увеличить шрифт</a></li>
			<li><a href="#zoom" id="reset" title="сбросить шрифт">сбросить шрифт</a></li>
			<li><a href="#zoom" id="decrease" title="уменьшить шрифт">уменьшить шрифт</a></li>
            <li><a href="#zoom" id="font24" title="шрифт = 24">шрифт = 24px</a></li>
            <li><a href="#zoom" id="increase_мах" title="увеличить шрифт">увеличить шрифт без ограничения исключая потомков</a></li>
		</ul>
</script>
</body>

</html>

P.S. конечно это можно сделать и без плагина )))

Последний раз редактировалось рони, 13.01.2021 в 19:33.
Ответить с цитированием