<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<a href="http://www.baidu.com" id="link">点击切换</a>

<br>

<img id="img" src="data:images/a.jpg" alt="图片" width="500" height="350">

</body>

</html>

<script>

  //需求: 点击a,改变图片

  //  点击a元素,修改img的src

  ////  1. 获取元素

  var link = document.getElementById('link');

  var img = document.getElementById('img');

  var flag = true; //用于标记当前展示的是那张图

  // 2. 给a注册点击事件

      link.onclick = function(){

        //    3. 在事件处理函数中修改img的src属性的值

        //4. 当点击a的时候,先判断flag的值,如果是true,就修改成b.jpg.否则就是a.jpg

        if(flag){

          //从a到b

          img.src = 'images/b.jpg';

          flag = false;

        }else{

          //从b到a

          img.src = 'images/a.jpg';

          flag = true;

        }

        return false; //阻止a的默认行为

      }

</script>

javascript总结36:DOM-点击按钮切换图片案例的更多相关文章

  1. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  2. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  4. JQuery移动动画实现点击按钮切换图片--JQuery基础

    直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...

  5. JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  7. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  8. Android_UI_点击按钮切换背景效果实现

    实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...

  9. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

随机推荐

  1. java基础－构建命令行运行的java程序简要注意

    今天编写了一个运行在服务端的java工具类,才发现自己以前很少关注运营方面的内容,导致在服务端部署一个java的工具变得异常困难,其实这也是自己对java的了解不够造成的. 首先,当代码编写完成之后, ...

  2. 【UVa】1606 Amphiphilic Carbon Molecules（计算几何）

    题目 题目 分析 跟着lrj学的,理解了,然而不是很熟,还是发上来供以后复习 代码 #include <bits/stdc++.h> using namespace std; ; stru ...

  3. MySql——事务控制语言（DTL）

    什么是事务(控制台只能是内存的操作) 通常,在此之前,我们说,一条语句使用一个分号(;)来结束,并得到执行. 那么我们说,这个“一次性执行”的过程,可以称为“一个事务”. 简单来说,“一条sql语句, ...

  4. Oracle block 格式

    Oracle block 格式 信息参考:  http://www.ixora.com.au/ 特别感谢 overtime 大哥对我的无私的帮助和对我一直鼓励支持我的网友这些资料是没得到oracle ...

  5. OD 实验(十七) - 对一个程序的逆向分析

    程序: 运行程序 弹出一个对话框,点击 OK 来到主界面,点击 Help -> Register Now 这是输入注册码的地方 按关闭程序的按钮 会提示剩下 30 天的使用时间 用 Ressco ...

  6. apt-get upgarde 和dist-upgrade的差别

    Debian/Ubuntu Linux都使用apt,升级时都是: apt-get update apt-get upgrade apt-get dist-upgrade 安装或升级系统分下面几个步骤. ...

  7. sql developer Oracle 数据库 用户对象下表及表结构的导入导出

    Oracle数据库表数据及结构的导入导出   导出的主机与即将导入到的目标主机的tablespace 及用户名需一直!!!!!

  8. 【Oracle】Oracle 10g利用闪回挽救误删的数据

    我们在开发和运维过程中,经常遇到数据被误删除的情况.无论是在应用开发中的Bug,还是修改数据的时候,如果提交了错误数据修改结果,会带来很多问题.一般来说,一旦提交commit事务,我们是不能获取到之前 ...

  9. 「小程序JAVA实战」小程序模块之间引用（19）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-19/ 上一节,讲了页面引用模块的概念,如果是模块之前引用呢?源码:https://github.c ...

  10. Asp.Net 自定义 httpmodel 中间件 管道

    https://msdn.microsoft.com/en-us/library/aa719858(v=vs.71).aspx http://www.cnblogs.com/jimmyzhang/ar ...