перекрытие цвета парения изображения jQuery
Я, может казаться, не нахожу примеров этого сделанного нигде в Интернете прежде, но здесь - то, что я собираюсь попытаться сделать... Я пытаюсь пойти о самом чистом способе разметить это.
Таким образом, у меня есть галерея изображений, где изображения являются всеми различными размерами. Я хочу сделать его так, чтобы, когда Вы наведение мыши изображение, это поворачивает оттенок оранжевого. Просто простой эффект при наведении курсора.
Я хочу сделать это, не используя подкачку изображения, иначе я должен был бы создать оранжевое изображение при наведении курсора для каждого отдельного изображения галереи, я хотел бы, чтобы это было немного более динамичным.
Мой план состоит в том, чтобы только расположить пустое отделение над изображением абсолютно с цветом фона, шириной и высотой 100% и непрозрачностью: 0. Затем с помощью jQuery, на наведении мыши у меня была бы непрозрачность, исчезают приблизительно к 0.3 и отходят назад для обнуления на mouseout.
Мой вопрос, каков был бы лучший способ к расположению HTML и CSS, чтобы сделать это эффективно и чисто.
Вот резюме, но неполная установка:
<li>
<a href="#">
<div class="hover"> </div>
<img src="images/galerry_image.png" />
</a>
</li>
.hover {
width: 100%;
height: 100%;
background: orange;
opacity: 0;
}
3 ответа
Итак, начнем с немного более простого HTML:
<ul id="special">
<li><a href="#"><img src="opensrs-2.png" /></a></li>
<li><a href="#"><img src="opensrs-1.png" /></a></li>
</ul>
Вот мое решение:
<style type="text/css">
#special a img { border: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#special a').bind('mouseover', function(){
$(this).parent('li').css({position:'relative'});
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'orange',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.5
}).bind('mouseout', function(){
$(this).remove();
}).insertAfter(this);
});
});
</script>
РЕДАКТИРОВАТЬ: При быстром появлении, исчезновении:
$('#special a').bind('mouseover', function(){
$(this).parent('li').css({position:'relative'});
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'orange',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.0
}).bind('mouseout', function(){
$(this).fadeOut('fast', function(){
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 0.5
}, 'fast');
});
Вот и все
<script type="text/javascript">
$(function(){
$("img").hover(function(){
$(this).fadeTo("slow",0);
},
function(){
$(this).fadeTo("slow",1);
});
});
</script>
<style type="text/css">
#lookhere{
background-color:orange;
width:auto;
}
</style>
Heres the html
<div id="lookhere"><img href="you know what goes here"></div>
Работает и выглядит довольно круто. Хорошая идея.
Вы ищете что-то вроде этого:
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("#images span > img").hover(function(){
$(this).fadeTo("fast",0.3);
},function(){
$(this).fadeTo("fast",1.0);
});
});
</script>
HTML:
<div id="images">
<span><img src="image1.jpg" /></span>
<span><img src="image2.jpg" /></span>
<span><img src="image3.jpg" /></span>
<span><img src="image4.jpg" /></span>
<span><img src="image5.jpg" /></span>
<span><img src="image6.jpg" /></span>
<span><img src="image7.jpg" /></span>
</div>
CSS:
<style type="text/css">
#images span {
display: inline-block;
background-color: orange;
}
</style>