JS怎么实现图片放大效果
日期：2014-05-16 浏览次数：20385 次
JS如何实现图片放大效果
我想用div+css和表格，并结合js实现，当鼠标移动至左边的任一图像上时，右边显示其对应的放大图片，默认即当鼠标没移动至图上时右边总是显示第一个图像。可我做出来的效果却是右边总是显示第一个图像，所以麻烦各位帮我指点下---是什么原因造成的？或有什么好的方法来实现这效果？
我想用div+css和表格，并结合js实现，当鼠标移动至左边的任一图像上时，右边显示其对应的放大图片，默认即当鼠标没移动至图上时右边总是显示第一个图像。可我做出来的效果却是右边总是显示第一个图像，所以麻烦各位帮我指点下---是什么原因造成的？或有什么好的方法来实现这效果？
<style type="text/css">
table{
border:3px soild black;
position:relative;
}
table#special{
border:3px soild black;
position:relative;
left:212px;
top:-445px;
}
</style>
<script type="text/javascript">
window.onload= function show(){
if(this.onmouseover==document.getElementById("11").onmouseover)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
else if(this.onmouseover==document.getElementById("22").onmouseover)
{
document.getElementById("1").style.display="none";
document.getElementById("2").style.display="block";
document.getElementById("3").style.display="none";
}
else if(this.onmouseover==document.getElementById("33").onmouseover)
{
document.getElementById("1").style.display="none";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="block";
}
else if(this.onmouseout==document.getElementById("11").onmouseout)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
else if(this.onmouseout==document.getElementById("22").onmouseout)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
else if(this.onmouseout==document.getElementById("33").onmouseout)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td width="200" height="145" nowrap="nowrap" id="11"><img src="DSC00303xx.jpg" width="200" height="145" /></td>
</tr>
<tr>
<td width="200" height="145" nowrap="nowrap" id="22"><img src="DSC00304xx.jpg" width="200" height="145" alt="" /></td>
</tr>
<tr>
<td width="200" height="145" nowrap="nowrap" id="33"><img src="DSC00305xx.jpg" wid
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
