Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Закругление изображений в помощью jQuery

  • Вторник, 12 октября 2011, 01:47 |
  • Автор: karpovi4 |
  • Просмотров: 3416 |
  • Комментарии: 2 |
  • В закладки:
Очень интересный способ закругления углов у изображений. Способ интересен тем, что реализован он с помощью jQuery и в параметрах не нужно определять размеры изображения. Скрипт все сделает сам!!)
Приступим)
Закругление изображений в помощью jQuery

CSS
Трюк очень прост: всего лишь ставим тэг span вокруг изоражения. В качестве фоноового изображения устанавливаем оригинал. Для того, чтобы спрятать его устанавливаем свойство opacity:0 или display:none. Я считаю, что лучше использовать свойство "opacity". Так как пользователь сможет скачать себе изображение) решать вам.
<span style="background:url(image.jpg) no-repeat">
<img scr="mage.jpg" style="opacity:0">
</span>


jQuery
Чтобы упростить процесс, используем jQuery.
Следующий код будет находить все элементы с ".rounded-img" or "rounded-img2" (у меня это элемент изображения) и рисовать спаны. Это все работает с любыми размерами изображений!!

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>


Вот и все)

Не менее полезным, на мой взгляд, будет статья о сворачивании блоков на Jquery

Теперь предлагаю отдохнуть, рассчитать ваш примерный доход от сайтостроения и подумать о том, когда вы сможете купить новостройку в балашихе.
Добавить комментарий