2

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

2
  • в контакте по видимому сделано так как во всяких плагинах для обрезки картинок. но так, как я понимаю, просто грузят одну и ту же картинку в разные слои. вам такой механизм не очень удобен будет
    – splash58
    8 мая 2016 в 13:31
  • @splash58 , хм да к стати я подозревал что там что то с gd2 намудрено
    – dantelol
    8 мая 2016 в 13:34

1 ответ 1

4

var selector = $('div.image-selector div.selector');
var img = $('div.image-selector img.original');
img.width(img.width()).clone().removeClass('original').addClass('copy').appendTo(selector);
selector.on('change', function() {
  $(this).find('img.copy').css({
    'margin-left': '-' + $(this).css('left'),
    'margin-top': '-' + $(this).css('top')
  });
});
selector.animate({
  left: 320,
  top: 200
}, {
  duration: 3000,
  progress: function() {
    selector.trigger('change');
  }
});
div.image-selector {
  width: 500px;
  overflow: hidden;
  background-color: #999;
  position: relative;
}
div.image-selector img.original {
  width: 100%;
  opacity: 0.5;
  display: block;
}
div.image-selector div.selector {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 180px;
  height: 130px;
  overflow: hidden;
  border: #FFF 2px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-selector">
  <img class="original" src="http://www.coolwebmasters.com/uploads/posts/2013-09/1378894260_background-07.jpg" />
  <div class="selector"></div>
</div>

1
  • не знаю, верно ли ты сделал. но мне нравится!)
    – dirkgntly
    8 мая 2016 в 15:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.