Наложение изображения на зависший JavaScript

Question

Наложение изображения на зависший JavaScript

0

Я пытаюсь отобразить дополнительную информацию по изображению, используя два оверлейных изображения. на наведении мыши наложения 1 будет отображаться в верхнем левом углу основного изображения, а overlay2 будет внизу справа..

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

Я хочу, чтобы изображения были наложены на соответствующие основные изображения.

здесь html-

<div id="WhizIt">
<div id="btpanelexsmall">
<h3>Heading1</h3>

<ul >
<li><a href=""><img src="image/" class="wit"/><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>
</ul><br>

<ul>
<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/arrow1.jpg" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>
</ul>
</div>
</div>

сценарий is-

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
            $('ul li').mouseenter(function() {
                $(this).find(".overlay").show();
                $(this).find(".overly").show();
            });
            $('ul li').mouseleave(function() {
                $(this).find(".overlay").hide();
                $(this).find(".overly").hide();
            });
        });
</script>

и css-

.WhizIt li{position:relative;
float:left;
padding-left:5px;
list-style:none;}


.overlay 
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;}



.overly 
{
 position:absolute;
 height:50px;
 width:150px;
 bottom:0;
 right:0; 
display:none;}

 #btpanelexsmall{height:390px;
 margin:0px;
 padding:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
border:2px solid yellow;
background: #f0f0f0;}

У меня много галерей на моей странице! заранее спасибо

arpymastro 13 нояб. 2013, в 11:44

Источник

0

Я думаю, что у вас есть этот же вопрос, прежде чем также! - stackoverflow.com/questions/19830285/…
Sujata Chanda 13 нояб. 2013, в 10:25
0

@SujataChanda да, и вы помните, что вы помогли мне найти решение ... но когда я сейчас использую скрипт, используя приведенный выше HTML, он не работает нормально
arpymastro 13 нояб. 2013, в 10:26
0

С какой проблемой вы сталкиваетесь сейчас?
Sujata Chanda 13 нояб. 2013, в 10:28
0

@SujataChanda при наведении курсора на основное изображение наложенные изображения отображаются по углам всего экрана, а не по углам основного изображения.
arpymastro 13 нояб. 2013, в 10:30
0

Хорошо. Позвольте мне разобраться в проблеме. Если я смогу найти какое-либо решение, то я опубликую его здесь.
Sujata Chanda 13 нояб. 2013, в 10:32
0

@SujataChanda почти уверен!
arpymastro 13 нояб. 2013, в 10:34
0

Ну, я думаю, что скрипт работает правильно. В css измените .WhizIt li на #WhizIt li . Я думаю, что это будет работать сейчас.
Sujata Chanda 13 нояб. 2013, в 10:39
0

@SujataChanda спасибо огромное ... какая глупая ошибка .... ты можешь мне помочь еще с одной вещью ?? я хочу, чтобы наложенные изображения появлялись во вращающемся образце ..
arpymastro 13 нояб. 2013, в 10:43

Показать ещё 6 комментариев

Теги:

javascript

jquery

html

css

image

2 ответа

Ещё вопросы

Я думаю, что у вас есть этот же вопрос, прежде чем также! - stackoverflow.com/questions/19830285/…
@SujataChanda да, и вы помните, что вы помогли мне найти решение ... но когда я сейчас использую скрипт, используя приведенный выше HTML, он не работает нормально
С какой проблемой вы сталкиваетесь сейчас?
@SujataChanda при наведении курсора на основное изображение наложенные изображения отображаются по углам всего экрана, а не по углам основного изображения.
Хорошо. Позвольте мне разобраться в проблеме. Если я смогу найти какое-либо решение, то я опубликую его здесь.
Ну, я думаю, что скрипт работает правильно. В css измените .WhizIt li на #WhizIt li . Я думаю, что это будет работать сейчас.
@SujataChanda спасибо огромное ... какая глупая ошибка .... ты можешь мне помочь еще с одной вещью ?? я хочу, чтобы наложенные изображения появлялись во вращающемся образце ..

Priya jain · Answer 1 · 2013-12-25T05-07-00.000Z

Попробуйте этот код:

<div id="WhizIt">
<div id="btpanelexsmall">
<h3>Heading1</h3>

<ul >
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>

</ul><br>

<ul>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>

</ul>
</div>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
            $('ul li').mouseenter(function() {
                $(this).find(".overlay").show();
                $(this).find(".overly_left").show();
                $(this).find(".overly").show();
            });
            $('ul li').mouseleave(function() {
                $(this).find(".overlay").hide();
                $(this).find(".overly_left").hide();
                $(this).find(".overly").hide();
            });

        });
</script>
<style>
.WhizIt li{position:relative;
float:left;
padding-left:5px;
list-style:none;}


.overlay 
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;}

.overly_left 
{
 position:absolute;
 height:50px;
 width:50px;
 top:0;
 left:0; 
display:none;}


.overly 
{
 position:absolute;
 height:50px;
 width:50px;
 bottom:0;
 right:0; 
display:none;}

 #btpanelexsmall{height:390px;
 margin:0px;
 padding:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
border:2px solid yellow;
background: #f0f0f0;}
</style>

Sujata Chanda · Answer 2 · 2013-11-13T11-09-00.000Z

Я думаю, что ваша первая проблема решена. Теперь, чтобы придать эффект "rotate" для наложенных изображений, используйте анимацию css3. Мы можем сделать это с помощью jquery, но я думаю, что использование css3 будет хорошим.

Для этого эффекта используйте этот скрипт:

 $(document).ready(function() {
                $('ul li').mouseenter(function() {
                    $(this).find(".overlay").show().addClass('rotate');
                    $(this).find(".overly").show().addClass('rotate');
                });
                $('ul li').mouseleave(function() {
                    $(this).find(".overlay").hide().removeClass('rotate');
                    $(this).find(".overly").hide().removeClass('rotate');
                });
            });

Добавьте это css: -

.rotate {
    -webkit-animation: rotateImg 1s linear;
    -moz-animation: rotateImg 1s linear;
    -ms-animation: rotateImg 1s linear;
    -o-animation: rotateImg 1s linear;
    animation: rotateImg 1s linear;
}

@keyframes "rotateImg" {
    50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-moz-keyframes "rotateImg" {
    50% {
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-webkit-keyframes "rotateImg" {
    50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-ms-keyframes "rotateImg" {
    50% {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-o-keyframes "rotateImg" {
    50% {
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

}