Question

我有一个简单的翻转脚本我想用来使个人资料拇指变得更大，这样你就可以真正看到这个人的脸。
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>

下一个人......

Answer 1

您还必须在鼠标悬停和鼠标移动时为图像设置position , height & width。您也可以在jquery中使用thumbPopup实用程序，例如此处.. link

Answer 2

在你的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>

弹出翻转图像并向左弹出

2 个答案: