0

我有一个简单的翻转脚本，我想用它来使个人资料拇指变大，这样你就可以真正看到这个人的脸。
Problem is when the image expands it is throwing off page layout. 有没有办法让图像的右上角保持不变，但向上和向左扩展覆盖旧图像以及它需要覆盖的任何其他内容？

感谢您的建议。

<tr>
<td>Joe Smith</td>
<td>
<a href="detail.html" onmouseover="document.pic.src='images/smallpic.gif'" onmouseout="document.pic.src='images/bigpic.gif'">
<img src="images/bigpic.gif" width="147" height="82" border="0" name="pic" alt="pic" />
</a>
</td>
</tr>

下一个人...

4

2 回答 2

0

您还必须position , height & width在 mouseover 和 mouseout 上设置图像。您也
可以thumbPopup在 jquery 中使用实用程序，例如这里..链接

于 2013-01-20T03:53:15.690 回答
0

在您的 jsfiddle 中，您不能向上和向左移动，因为没有空间可以去那里。

这是一些使用固定值而不是计算它们的代码，如果您希望使用拇指使其变得复杂，那么您应该预加载加载图像，当鼠标过度加载大图像/显示加载以及大图像时加载设置原始图像的src并重做样式。

<!DOCTYPE html>
<html>
<head>
<script>
function expand(obj){
    obj.style.position="relative";
    obj.style.left="-100px";
    obj.style.top="-100px";
    obj.style.width="200px";
    obj.style.height="200px";
}
function smaller(obj){
    obj.style.position="static";
    obj.style.width="100px";
    obj.style.height="100px";
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
    <td colspan=2 style="height:150px">
        <p>Some text here Some text here Some text here Some text here 
        Some text here Some text here Some text here Some text here </p>
    </td>
</tr>
<tr>
    <td style="width:200px"></td>
    <td>
        <div style="width:100px;height:100px" id="needThisContainer">
            <img src="picture.jpg" style="width:100px;height:100px" 
                onmouseover="expand(this);" 
                onmouseout="smaller(this)"/>
        </div>
    </td>
</tr>    
</tbody>    
</table>
于 2013-01-20T04:42:19.263 回答