我是JavaScript的新手，我试图创建一个事件，当单击一个图像时，另一个图像的位置会更改。我的屏幕左侧隐藏了图像，页面中央有一张图片表。我正在尝试使之单击表格中的图像时，隐藏的图像从左侧滑出。我正在尝试学习JavaScript，还不想使用JQuery。在此先感谢您的帮助。
以下是HTML，CSS和JavaScript：
表格的HTML：
<table>
<tbody>
<tr>
<td><img onclick="sleepFunction()" src="01.jpg" height="180" width="120"></td>
<td><img src="02.jpg" height="180" width="120"/></td>
<td><img src="03.jpg" height="180" width="290"/></td>
</tr>
<tr>
<td><img src="04.jpg" height="180" width="120"/></td>
<td><img src="05.jpg" height="180" width="120"/></td>
<td><img src="06.jpg" height="180" width="290"/></td>
</tr>
<tr>
<td><img src="07.jpg" height="180" width="120"/></td>
<td><img src="08.jpg" height="180" width="120"/></td>
<td><img src="09.jpg" height="180" width="290"/></td>
</tr>
</tbody>
图片的HTML：
<div class = "sleepImage">
<img src = "sleeping.jpg" width= "490"/>
</div>
这是CSS：
.sleepImage {
float: right;
position: absolute;
top: 108px;
left: -600px;
}
这是JavaScript代码：
function sleepFunction() {
document.getElementsByClassName("sleepImage").style.left = "300px";
}
将sleepImage从一个类更改为和id，因此您的代码应为
html
<div id = "sleepImage">
<img src = "sleeping.jpg" width= "490"/>
</div>
的CSS
#sleepImage {
/* your styles here */
}
js
function sleepFunction() {
document.getElementById("sleepImage").style.left = "300px";
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句