[英]image overlay on hover javascript
我试图通过使用两个重叠图像在图像上显示其他信息。 在鼠标悬停时,overlay1将显示在主图像的左上角,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>
脚本是-
<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;}
我的页面上有很多画廊! 提前致谢
我认为您的第一个问题已解决。 现在,要使叠加图像具有“旋转”效果,请使用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);
}
}
尝试以下代码:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.