<!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. 编译hostapd时，出现错误：/usr/bin/ld: cannot find -lnl

    book@ubuntu:/work/project/wifi/04.hostapd/hostapd-2.0/hostapd$ make /usr/bin/ld: cannot find -lnl co ...

  2. hotplug_uevent机制_修改mdev配置支持U盘自动挂载学习笔记

    1.接入U盘,看输出打印信息并分析 (1)输出信息 自动创建设备节点 (2)用ls命令查看 这里/dev/sda表示整个U盘,/dev/sda1表示这个U盘的第一个分区. (3)手动挂载,查看文件,手 ...

  3. verilog 之数字电路 寄存器，触发器。

    我一直听说没有由code到circuit就只是入门了.实在没办法了.我想了一招,一个一个的写,然后看RTL,然后分析.这是第一篇. 1.触发器. 没有复位,置位.posedge clk 是触发沿时钟. ...

  4. Solr 6.0 学习（五）solr基本查询和高级查询

    参考:http://www.cnblogs.com/rainbowzc/p/4354224.html 查询参数 常用: q - 查询字符串,必须的. fl - 指定返回那些字段内容,用逗号或空格分隔多 ...

  5. sublime text安装插件

    http://www.sublimetext.com/ 安装Sublime Text 2插件的方法: 1.直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Package ...

  6. Vcf文件格式

    Vcf文件格式是GATK钟爱的表示遗传变异的一种文件格式. 就拿GATK给出的vcf例子说明吧,下面这个文件只表示了一个完整vcf文件的前几个SNP. 看上去确实有点复杂,那就把它分为两部分看吧,第一 ...

  7. 记录两个python的小问题

    使用python也前前后后也一个月的样子,记录两个一直没注意的问题. 1. 元组的使用(拼接字符串) 直接看下面的代码: >>> kel = 'some','strings' > ...

  8. 在线程中调用其它主界面的模块，因为中间有休息1000ms，所以调用前要检查DateTimeRun变量；在From_load 启动线程；在From_closing From_closed 设置DateTimeRun=false

    //系统启动后,自动启动时钟 void jishi_kernel() { try { while (DateTimeRun) { Thread.Sleep(); if (myRunning) Runn ...

  9. 导出ppt中所有文本框

    打开PPT,按ALT+F11打开VBA编辑器,(部分电脑FN+ALT+F11)在左面的工程视图里点击右键,选择插入->模块,添加一个模块,名字都不用改. 然后点击顶部的"工具" ...

  10. sqlite在终端中输入命令不显示

    问题: 今天通过命令想访问我设备里面的db文件,但是进入到 sqlite> 后,输入命令都是不显示的,但是回车是可以执行的.如图 经过一番排查后,发现,因为我前面使用了su命令,不要使用su命令 ...