<!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. node的模块管理

    /* *一:从node_modules目录中加载模块; * 向这样的写法: * require("aa.js") * 则node将aa.js文件视为node_modules目录下的 ...

  2. 【UVa】1374 Power Calculus（IDA*）

    题目 题目     分析 IDA*大法好,抄了lrj代码.     代码 #include <cstdio> #include <cstring> #include <a ...

  3. MariaDB主从异步复制详解

    一 异步复制(Asynchronous replication) 1.MariaDB本身支持单向的.异步的复制.异步复制意味着在把数据从一台机器拷贝到另一台机器时有一个延时,最重要的是这意味着当应用系 ...

  4. C 语言 - 逻辑运算和短路求值

    逻辑运算符: 运算符 含义 优先级 ! 逻辑非 高 && 逻辑与 中 || 逻辑或 低 举例: !a:如果 a 为真,!a 为假:如果 a 为 假,!a 为真 a && ...

  5. Ubuntu13.10：密码忘记了怎么办？

    重启ubuntu系统,开机时长按shift按键进入GRUB菜单,选择第二个高级模式. 新版的UBUNTU系统居然启用了GRUNB2.0的内核!虽然传说相当的牛X,但是用起来感觉就是非常看不清楚字体,要 ...

  6. 回归问题中代价函数选择的概率解释(Probabilistic interpretation)

    在我们遇到回归问题时,例如前面提到的线性回归,我们总是选择最小而成作为代价函数,形式如下: 这个时候,我们可能就会有疑问了,我们为什么要这样来选择代价函数呢?一种解释是使我们的预测值和我们训练样本的真 ...

  7. android在linux下刷机

    只需要下载相应的zip包,不需装什么手机助手. 1.下载相应zip包(ROM) http://download.mokeedev.com/ 比如我在上述网站下的魔趣的对应机型的ROM包. 2.linu ...

  8. JSP显示错误信息中四个范围来保存变量

    JSP中提供了四个范围来保存变量,分别是page,request,session,以及application 其中page范围只在当前页面有效,离开当前页面就失效了,这个肯定不行 request范围在 ...

  9. flutter photo_view的改造

    app中对图片的浏览.缩放是一个常用的功能,目前有一款插件photo_view,基本上可以满足这些功能,但是有些地方需要修改完善 1.双击放大的时候,有三个状态,会有一个放大的中间状态,需要点击三次才 ...

  10. Mysql 日志文件类型

    简介: Mysql 中提供了多种类型的日志文件,分别反映 Mysql 的不同信息,了解它们很有必要. 1.Error log ( 错误日志 ) 错误日志记录了 Mysql Server 运行过程中所有 ...