如何添加图像翻转到Javascript

我有一个图像，当点击隐藏的内容被显示，它切换到不同的图像，当再次点击它恢复到正常状态。我正在使用我在这个网站上找到的一些代码，它效果很好。我想添加翻转图像以及。我难倒了如何做到这一点，因为我不是很熟悉JavaScript。任何帮助表示赞赏。如何添加图像翻转到Javascript

<head> 
<script language="javascript" type="text/javascript"> 
var imageNo = 2; 
function swapImage() { 
image = document.getElementById('image') 
switch (imageNo) { 
case 1: 
    image.src = "images/img.png" 
    imageNo = 2 
    document.getElementById('content').style.display = 'none' 
    return(false); 
case 2: 
    image.src = "images/img1.png" 
    imageNo = 1 
    document.getElementById('content').style.display = 'block' 
    return(false); 
} 
} 
</script> 
</head> 

<body> 
    <h4><a href="#"><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></a></h4> 
    <div id="content" style="display:none">This content toggles</span> 
</body><code>

来源

2012-03-31 vic

使用onmouseover事件如果您希望鼠标悬停在图像元素上的行为相同。

<img id="image" name="image" src="images/img.png" border="0" 
     onclick="swapImage();" onmouseover="swapImage();"/>

来源

2012-04-01 00:00:26 ShankarSangoli

感谢您的快速回复，我试过了，问题在于，一旦您将图片悬停在图片上，就会显示内容并隐藏它，您必须将光标从图片上移开然后回来 – vic 2012-04-01 00:08:36

尝试添加一个onmouseout =“swapImage（）;” – lifeIsGood 2012-04-01 00:13:26

我试过这个问题，然后是，一旦你点击图像，而不是它隐藏的内容，然后当你移动光标的内容是可见的当它不应该。 – vic 2012-04-01 01:44:47

的CSS :hover选择很简单：

#image:hover { 
    background: url(your/image.png); 
}

来源

2012-04-01 00:16:51

请参阅下面的小提琴http://jsfiddle.net/AGgha/3/。
它使用jQuery（http://jquery.com/),which）让你的js开发变得更容易，并且让你的div动画化
它使用setInterval进行infinte swaping，就像你在img上一样。

来源

2012-04-01 00:37:18 marspzb

哇，我是一个新手o html，这有点凌驾于我的头上。我玩了一段代码，但我真的不知道我在做什么。悬停时如何使图像不能在图像中循环播放？一旦图像被点击，是否可能只显示内容？ – vic 2012-04-01 02:12:43

如果你看到小提琴那里有mouseIn/mouseOut函数，他们在那里做一个setInterval，你传递一个函数和一个毫秒数（x）。然后每x毫秒调用一次该函数。如果你想要这样做，你应该调用具有相同参数的setTimeout（一个函数和一个毫秒数x），调用该函数它会在x毫秒后执行一次你的方法。如果您只想显示悬停中的内容，则可以更改mouseIn/mouseOut函数，使用display =“block”显示内容或使用jQuery执行slideUp/Down – marspzb 2012-04-01 05:27:26

如何添加图像翻转到Javascript

回答

相关问题