求教。为什么点击图片后会往下移动位置。

Question

    <div class="picture">        <ul>            <li class="picture-1"><img src="img/logo.a.png"  id="P_1" onclick="fnImg(this,'P_2')">             <img id="P_2" style="display:none;" src="img/logo.js.png" onclick="fnImg(this,'P_1')" />               </li>            <li class="picture-2"><img src="img/logo.b.png"  id="P_3" onclick="fnImg(this,'P_4')">             <img id="P_4" style="display:none;" src="img/logo.rc.png" onclick="fnImg(this,'P_3')" />            </li>            <li class="picture-3"><img src="img/logo.d.png"  id="P_5" onclick="fnImg(this,'P_6')">             <img id="P_6" style="display:none;" src="img/logo.rj.png" onclick="fnImg(this,'P_5')" />            </li>             <li class="picture-4"><img src="img/more.png" />            </li>             <li class="picture-5"><img src="img/logo.e.png"  id="i_1" onclick="fnImg(this,'i_2')">             <img id="i_2" style="display:none;" src="img/logo.dsj.png" onclick="fnImg(this,'i_1')" />            </li>            <li class="picture-6"><img src="img/logo.f.png"  id="i_3" onclick="fnImg(this,'i_4')">             <img id="i_4" style="display:none;" src="img/logo.zx.png" onclick="fnImg(this,'i_3')" />             <li class="picture-7"><img src="img/logo.c.png"  id="i_5" onclick="fnImg(this,'i_6')">             <img id="i_6" style="display:none;" src="img/logo.yjs.png" onclick="fnImg(this,'i_5')" />            </li>            </li>        </ul><!-- / -->    </div>    <script>function fnImg(pic,ture){pic.style.display = 'none';document.getElementById(ture).style.display = 'block';}</script>css#Solution .picture{position: relative;margin: 0 auto;}#Solution .picture-1{top: 96px;left: 230px;position: absolute;}#Solution .picture-2{top:210px;left: 370px;position: absolute;}#Solution .picture-3{top:96px;left: 485px;position: absolute;}#Solution .picture-4{top:230px;left: 630px;position: absolute;}#Solution .picture-5{top:96px;left: 760px;position: absolute;}#Solution .picture-6{top:210px;left: 890px;position: absolute;}#Solution .picture-7{top:96px;left: 1010px;position: absolute;}点击一个图片显示另一个图片，但是另外一个图片老是往下移动一点

Answer 1

这里，用JavaScript封装了一个函数，并且在所有列表和图片中进行了事件绑定（onclick="fnImg(this,'P_5')..），这个事件是点击事件，意思是，当鼠标点击时执行fnImg这个函数，并且在（）,中传入了两个参数，供函数调用。对应下面的CSS样式，所有的CSS样式里都有绝对定位属性，改变它的top值还是left值都可以使图片移动。