0

我正在使用prototype.js 函数来裁剪隐藏的img。要裁剪的 javascript 函数是“裁剪”。它在身体加载时裁剪图像。将调用“crop”的 HTML div=id 是“crop”。此外，div="thumb" 正在执行与 class="top" 不同的特定悬停。

//*首先它是这样的：

<div class="thumb">
<span class="text">text text text text text text text</span>
<div id="crop" class="top" style="width:900px; height:250px; /">
</div>
</div>

//*这是要裁剪的图像：

<img id="img" src="bond.jpg" style="display:none" />

带有那里的 class="thumb" 使一个带有“text text text”的小框。现在，正在发生的事情是，类“thumb”在 div="crop" 后面悬停了一个带有“text text”的框。

我已经尝试了很多尝试跳过放置 class=thumb 的需要，但实际上 div id="crop" 不能这样工作。

换句话说，我认为由于 div id="crop" 已经在执行功能以裁剪其编码方式，因此最好保持这种方式

现在检查裁剪功能：

<script language="javascript" type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript">


function crop(img_id, crop_id, x, y, width, height) {
$(crop_id).update('<img id="' + crop_id + '_img" src="' +
$(img_id).getAttribute('src') + '" style="display:none" />');

var scale_x = $(crop_id).getWidth() / width;
var scale_y = $(crop_id).getHeight() / height;

$(crop_id).setStyle({
position: 'relative',
overflow: 'hidden' 
});

$(crop_id + '_img').setStyle({
position: 'absolute',
display: 'block',
left: (-x * scale_x) + 'px',
top: (-y * scale_y) + 'px',
width: ($(img_id).getWidth() * scale_x) + 'px',
height: ($(img_id).getHeight() * scale_y) + 'px'
});
}
</script>

of wich 将在 bodyload 上调用：

<body onload="crop('img', 'crop', 0, 0, 1400, 300)">

所以毕竟我真正想问的是：如何让“文本文本文本”框出现在所有 div（裁剪和拇指）的前面？

这里使用的CSS：

.top {  
position: absolute;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 20pt;
font-weight: bold;
background:#FFFFFF;
border: 1px dashed #000000;
height: 5%;
width: 100%;
}

.thumb {
position: relative; 
width: 910px;
height: 250px;
border: 2px dashed #444;
margin: 10px;
float: left
}

.text, .text-js {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0,0,0,0.3);
text-align: center
}
.thumb:hover .text {
display: block;
}
4

1 回答 1

0

我将您的代码移植到了 jsFiddle。这是有解决方案的那个。

很难判断裁剪是否正常工作，因为我们没有图像，但我相信给<span class="text">高z-index（我用 100）可以解决问题。现在，当您将鼠标悬停在 div 上时，就会出现文本。

CSS：

text, .text-js {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #999;
    background: rgba(0,0,0,0.3);
    text-align: center;
    z-index:100; //add this
}
于 2012-08-22T04:52:43.270 回答