Изображение Значки / Ярлыки на углу.Какая библиотека (jQuery?) Будет лучшей? - PullRequest
Новая
       20

Изображение Значки / Ярлыки на углу.Какая библиотека (jQuery?) Будет лучшей?

3 голосов
/ 30 июля 2011

Я пытался выяснить, как именно они называются, и какие библиотеки вы можете использовать для их реализации.Или, может быть, есть простое решение CSS, которого я не видел?

По сути, я хочу добавить метку в угол некоторых моих изображений.Я хочу, чтобы это выглядело как кусочек цветной ленты с надписью «New» или «Free».Но я не могу понять, как называются эти ленты.Вот пример (примечание: метка находится в верхнем правом углу).

edit: я новый пользователь, поэтому не могу публиковать изображения.Ламе.Но я понимаю предпосылку противодействия спаму. Вместо этого, вот ссылка на пример слайд-шоу с «новым» ярлыком в углу:

http://www.slidesjs.com/

Поиск в Googleпоявилось «значки», но они больше похожи на значки iPhone, и это не то, что я хочу.Вот как они выглядят.Обратите внимание на красные значки также в правом верхнем углу двух разделов текста ниже.

edit: удалено второе изображение.

Я также обнаружил эту ссылку при поиске, но значок, использованный в примере, уродлив.

Автоматически размещайте значок в углу изображения .

Поэтому мне интересно, придется ли мне создавать свой собственный или есть плагин или готовое решение.Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 30 июля 2011

Вам не нужен Javascript для этого.Вы можете сделать это с помощью старого доброго CSS.Что-то вроде 

#badge{
    position: absolute;
    top: 0p;
    left: 0px;
}

Вы можете изменить сверху вниз и слева направо, если хотите, чтобы оно появилось в другом углу.Вы просто помещаете свой значок в тот же элемент div, что и изображение, например: 

<div>
    <img id="badge" src="..." />
    <img src="..." />
</div>

О, элементу контейнера также требуется position: relative;, чтобы position: absolute внутри него работал.Вот ссылка на jsfiddle с использованием изображений из слайд-шоу, которое вы мне тоже связали:

http://jsfiddle.net/ky2Ac/

Это выглядит немного иначе, потому что добавили белую рамку вокруг их изображения, но это достаточно простосделать.Дело в значке :) Теперь вам просто нужно найти хорошее изображение с прозрачным фоном, чтобы использовать его для значка (я тоже не знаю, как его еще назвать).

0 голосов
/ 31 июля 2011

Простой CSS.

Создайте элемент с графическим изображением баннера, поместите его в корень вашего HTML-кода (т.е. внутри тега <body>, но не внутри чего-либо еще), затем стилизуйте его следующим образом: 

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

Пояснение:

position:fixed - это устанавливает его так, чтобы его положение фиксировалось в окне браузера. Вы можете прокрутить остальную часть страницы, и баннер не будет двигаться. (Если вы хотите, чтобы он перемещался вместе с остальной частью страницы, измените его на position:absolute;)

top:0 и right:0 - делайте то, что они звучат так, как должны, и размещайте баннер в верхнем правом углу страницы. Не стесняйтесь использовать bottom и left, если хотите. Если вы хотите сделать отступ немного, установите его примерно так: right:5px; (обратите внимание на px для пикселей).

z-index:1000 - это может быть любое значение или даже может быть полностью исключено, в зависимости от того, как выложена остальная часть страницы. Идея состоит в том, чтобы баннер отображался перед любым другим контентом, который вы, возможно, разместили на странице.

Надеюсь, это поможет.

0 голосов
/ 30 июля 2011

Простой способ сделать это - поместить баннер как изображение в div, а затем изображение как background-image из div.

HTML 

<div>
    <img src="http://assets.visrez.com/sites/gibsonhotel/Includes/images/corner_banner.png" />
</div>

CSS 

div{background:url(http://www.health-for-dogs.com/wp-content/uploads/2011/05/old-dog-150x150.jpg) no-repeat;}

http://jsfiddle.net/jasongennaro/25cFh/1/

...