点击按钮实现图片切换效果

我心飞翔 分类:实例代码

本章节分享一段代码实例,它实现了点击按钮两张图片可以互相切换的效果。

当然这样简单的代码实际应用中非常少见,不过可以作为一些知识点的学习之用。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#text {
  width: 200px;
  height: 200px;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
}
img {
  width: 200px;
  height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var oBtn = document.getElementById("btn");
  var oImg = document.getElementById("img");
  var oText = document.getElementById("text");
  var onOff = true;
  oBtn.onclick = function () {
    if (onOff) {
      oImg.src = "demo/js/img/2.jpg";
      oText.innerHTML = "犀牛前端部落";
      onOff = false;
    }
    else {
      oImg.src = "demo/js/img/5.jpg";
      oText.innerHTML = "www.pipipi.net";
      onOff = true;
    }
  }
}
</script>
</head>
<body>
  <input id="btn" type="button" name="" value="切换图片" />
  <img id="img" src="demo/js/img/5.jpg" />
  <p id="text">www.pipipi.net</p>
</body>
</html>

上面的代码非常的简单,就是动态的设置img标签的src属性值以此达到效果。

点击按钮实现图片切换效果,这样的场景在实际项目中还是用的比较多的,关于点击按钮实现图片切换效果就介绍到这了。

点击按钮实现图片切换效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容