<!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. 短URL链接系统

    定义: 短网址(Short URL),顾名思义就是在形式上比较短的网址.但不知道有多少人像我一样,由于面试问道才知道有这种系统而对短连接原理好奇,从而进行进一步的研究.在Web 2.0的今天,不得不说 ...

  2. Python Twisted系列教程18：Deferreds 全貌

    作者:dave@http://krondo.com/deferreds-en-masse/  译者: Cheng Luo 你可以从”第一部分 Twist理论基础“开始阅读:也可以从”Twisted 入 ...

  3. dubbo 梗概及使用示例

    阿里巴巴dubbo主页:http://code.alibabatech.com/wiki/display/dubbo/Home-zh 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提 ...

  4. 前端基础——jQuery

    一 jQuery 1 简介 jQuery是一个“写得更少,但做得更多”的轻量级JavaScript库.jQuery极大地简化了JavaScript编程. 它是轻量级的js库(压缩后只有21k) ,这是 ...

  5. C++常见错误坑洞

    指针没初始化就使用*解引用运算符; 连续delete释放new指针; 使用delete 是否常规普通变量内存; 地址直接复制给制作

  6. Rhel5.5配置Centos yum源

    ruiy哥,抛砖引玉 当你使用rhel系统时,[大部分数据库中心及政府企业选择linux服务器时通常考虑采购的版本一般不外乎是Rhel红帽及Suse,理由你懂的EcoSystem!]你没有一个红帽网络 ...

  7. php效率优化

    php效率优化 最近在公司一边自学一边写PHP程序,由于公司对程序的运行效率要求很高,而自己又是个新手,一开始就注意程序的效率很重要,这里就结合网上的一些资料,总结下php程序效率优化的一些策略:1. ...

  8. MySQL 主从同步失败，数据表修复

    问题描述: 接到报警称一台 MySQL 从库同步失败.登录服务器查看错误日志信息如下: Last_Error: Error 'Incorrect key file for table './bfcc/ ...

  9. C++中float类型的存储

    C++中float用32位来表示,f = (-1)^S * T * 2^E,S是符号位,T是尾数,E是指数 首先我们把f表示成科学计数法的形式,然后再写出其在内存中的表示,在这里T写成1.XXX的形式 ...

  10. git的突出解决--git rebase之abort、continue、skip

    (1)应用实例描述 假设在github或者gitoschina上建立了一个项目,默认分支为master分支,远程master分支上c.sh文件内容: 开发者A.B分别将项目拷贝到自己本地进行开发 某一 ...