zoukankan      html  css  js  c++  java
  • Supercharging our example website

     

    Now we've gone over a few JavaScript basics, let's add a few cool basic features to our example site to give you some first idea of what is possible.

    Adding an image changer

    In this section we'll add another image to our site, and add some simple JavaScript to change between the two when the image is clicked on.

    1. First of all, find another image that you'd like to feature on your site. Make sure it is the same size as your first image, or as close as possible.
    2. Save the image in your images folder.
    3. Go to your main.js file, and enter the following JavaScript (if your hello world JavaScript is still there, delete it):
      var myImage = document.querySelector('img');
      
      myImage.onclick = function() {
          var mySrc = myImage.getAttribute('src');
          if(mySrc === 'images/firefox-icon.png') {
            myImage.setAttribute ('src','images/firefox2.png');
          } else {
            myImage.setAttribute ('src','images/firefox-icon.png');
          }
      }
       
      

        

    4. Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

    So here, we are storing a reference to our image element in the myImage variable. Next, we make this variable's onclick event handler property equal to an anonymous function. Now, every time this image element is clicked:

    1. We retrieve the value of the image's src attribute.
    2. We use a conditional to check whether the src value is equal to the path to the original image:
      1. If it is, we change the src value to the path to the 2nd image, forcing the other image to be loaded inside the <image> element.
      2. If it isn't (meaning it must already have changed), we change the src value back to the original image path, to flip it back to how it was originally.
  • 相关阅读:
    Python3 实现一个简单的TCP 客户端
    Mac 下 安装 和 使用 Go 框架 Beego
    Go 操作文件及文件夹 os.Mkdir及os.MkdirAll两者的区别
    Go gin 之 Air 实现实时加载
    Mac os 配置常用alias
    Mac 下 MAMP配置虚拟主机
    Thinkphp5 项目部署至linux服务器报403错误
    Linux 安装最新版 node.js 之坑
    Mac item2如何使用rz sz 上传下载命令
    Mac 使用 iTerm2 快捷登录远程服务器
  • 原文地址:https://www.cnblogs.com/hephec/p/4601145.html
Copyright © 2011-2022 走看看