兔年贺岁——web网页点击切换图片

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

前言

刚刚才开始看web开发,看到js基础有切换图片的代码,学习了一下,找了两张图片来试验一下,发现可行,于是便上传到码上掘金了,也算是交作业了。

正篇

实现过程

首先,我们先写好HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
     <link href="https://fonts.google.com/specimen/ZCOOL+KuaiLe" rel="stylesheet" type="text/css">


<title>RabbitPlus</title>
  </head>
  <h1>兔年大吉</h1>
  <p></p>
  <body>
    <img src="https://img0.baidu.com/it/u=3553655242,4084834626&fm=253&fmt=auto&app=138&f=JPEG?w=770&h=500" alt="Rabbit Year image">
  </body>

</html>

初学,所以都不熟练,只能简单的写了个标题和图片进去,然后我们在添加CSS样式:

h1,
p,
body {
  color: red;
  text-align: center;
}

就对相关有内容的地方加了颜色和居中,最后是我们的JS:

let myP = document.querySelector('p');
myP.textContent = '鸿运当头';

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'https://img0.baidu.com/it/u=3553655242,4084834626&fm=253&fmt=auto&app=138&f=JPEG?w=770&h=500') {
      myImage.setAttribute('src', 'http://img2.baidu.com/it/u=2316453795,578025214&fm=253&app=138&f=JPEG?w=770&h=500');
    } else {
      myImage.setAttribute('src', 'https://img0.baidu.com/it/u=3553655242,4084834626&fm=253&fmt=auto&app=138&f=JPEG?w=770&h=500');
    }
}

看到MDN里面的JS基础中举例,使用onclick方法对对象myImage进行判断是否相同,不同使用myImage对象的setAttribute方法去重新设置图片内容src,从而起到点击图片就切换的效果。

效果展示

最终效果如下:

总结

掘金的码上掘金之前一直就想试着写点东西上去,但是奈何我完全不会写这些代码,如今在MDN里面慢慢学习,感觉前端挺有意思,风格自由,很多东西比安卓要有意思一些,但是学起来也感觉五花八门,很容易这边看一点,那边学一会,然后组合起来就不会写了,不过只要多练习,相信慢慢能写的好的。