鼠标附近的图像翻转缩放
[英]Image rollover-zoom near mouse
问题描述
我有一个降临节/圣诞节日历。 每天都是另一幅画，还有一扇打开的门。 为了使这些区域可点击，我使用了CSS和ID，如下所示：
CSS：
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregionsli {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
#door2 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
HTML：
<ul id="doorregions">
<li id="door1">
<span><a href="<?php echo($december1); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
<li id="door2">
<span><a href="<?php echo($december2); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
</ul>
到目前为止，一切正常。 现在，当鼠标悬停在该区域上时，图像应该在鼠标光标附近显示一扇门。 我尝试了类似的东西：
#door1 a:hover {
display:block;
background-image: url(OTHERPICTURE1.jpg);
}
但是，如果其他图片大于门区域，则此方法不起作用。 还有其他想法吗？ 我无法切片背景图像，这不是一种选择。
不必在该区域中跟随鼠标，位置可以固定。 但是，仅当鼠标在门上时（或可能在第二张图片上），才会出现第二张图片。
最好的解决方案是这样的： http : //www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
但是在这种情况下，它是放大的同一张照片。我只有空白的gif。 什么是最聪明的主意？
4 个解决方案
解决方案1
1 2009-11-24 02:56:48
如果您愿意使用jQuery，则可以为每个“门”创建一个隐藏的div。 然后，结合悬停事件的a标签和div的可见性设置为true。 像这样：
$("li #door1 a").hover(function () {
$("div #door1image", this).fadeIn("fast");
}, function () {
$("div #door1image", this).fadeOut("fast");
});
“ door1image”是将从头开始隐藏的div的ID（ display:none ）。 它可以放在内li与a每扇门的标签。
代码未经测试，可能并不完美，但是希望您能理解。
解决方案2
0 已采纳 2009-11-24 03:19:50
将门div设置为位置怎么办：相对，然后使用负底和右位置示例进行绝对定位的div：
#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25;
Right:-25;
Display:none;
}
然后使用javascript将显示属性更改回正常状态。
希望这可以帮助。
解决方案3
0 2009-11-24 16:03:32
我无法像我所希望的那样使淡入淡出或动画正常工作，但是这就是我制作弹出图像的方式。 注意：该图像应该是您要悬停显示的图像，而不是使用空白图像。
的CSS
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregions li {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
}
#door2 {
left: 225px;
top: 192px;
}
.doors {
background: #444;
width: 73px;
height: 116px;
}
.popup {
position: absolute;
top: 0;
left: -99999px;
border: 0px;
z-index: 9;
}
的HTML
<ul id="doorregions">
<li id="door1" class="doors">
<span><a href="<?php echo($december1); ?>">
<img class="popup" src="<?php echo($december1Image); ?>">
</a></span>
</li>
<li id="door2" class="doors">
<span><a href="<?php echo($december2); ?>">
<img class="popup" src="<?php echo($december2Image); ?>">
</a></span>
</li>
</ul>
脚本
// using window.load to ensure all images are loaded
$(window).load(function(){
$('.doors').each(function(){
var popup = $(this).find('.popup');
// find middle of door
var doorY = $(this).height()/2;
var doorX = $(this).width()/2;
// position middle of popup to middle of door
var popY = doorY - popup.height()/2;
var popX = doorX - popup.width()/2;
popup
.hide()
.css({top: popY, left: popX });
$(this).hover(function(){
popup.show();
},function(){
popup.hide();
})
})
})
解决方案4
0 2009-11-24 16:18:54
我不能完全确定你需要什么的，但下面的代码复制你提供的“花式缩略图”链接的功能。 希望它会有所帮助！
<!DOCTYPE html>
<style>
ul {
list-style: none;
margin: 50px;
padding: 0;
}
li {
width: 300px;
height: 300px;
float: left;
border: 3px outset gray;
background: white;
}
li:hover {
margin: -50px;
width: 400px;
height: 400px;
z-index: 2;
position: relative;
}
</style>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
如何将带有翻转jQuery的链接图像转换为Codeigniter
[英]How to Convert a linked image with rollover jquery to codeigniter
将鼠标悬停在图像上时显示带有PHP变量的新图像/窗口
[英]Displaying a new image/window with PHP variables when you rollover an image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.