javascript总结36:DOM-点击按钮切换图片案例

<!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-点击按钮切换图片案例的更多相关文章

JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
JQuery移动动画实现点击按钮切换图片--JQuery基础
直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...
JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）
点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
Android_UI_点击按钮切换背景效果实现
实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现一.在xml文件里首先现在layout的一个xml文件下定义Button如下所示: [ ...
Axure初体验:简单交互、通过按钮切换图片
前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

随机推荐

01：Sysbench 基准压测 IO篇
line:V1.1 mail: gczheng@139.com date: 2017-11-17 一.Sysench测试前准备 1.1.压测环境配置信息主机 Dell PowerEdge R73 ...
修改win7远程桌面端口号
Windows 7/Vista/XP/2003等系统中的远程终端服务是一项功能非常强大的服务,同时也成了入侵者长驻主机的通道,入侵者可以利用一些手段得到管理员账号和密码并入侵主机.下面,我们来看看如何 ...
Java toString()方法
JDK API java.lang 的Object类中的toString()方法 toString public String toString() 返回该对象的字符串表示.通常,toString 方 ...
Windows 经典DOS命令大全
copy \\ip\admin$\svv.exe c:\ 或:copy\\ip\admin$\*.* 复制对方admini$共享下的srv.exe文件(所有文件)至本地C: xcopy 要复制的文件或 ...
CentOS7.6安装JDK(Openjdk)
安装开始: 第一步: 使用yum源安装 OpenJDK,yum install -y java-1.8.0-openjdk 第二步: 查看安装版本,java -version 运行时发现错误汇总: 错 ...
[Z] 一些关于http服务器架构设计的资料
开始关注这块儿,先从最基础最简单的入手.这里放一些我看过的觉得可以收藏的资料,主要是网页或博客,经典书籍之类有时间再看吧: 风格之争:Coroutine模型 vs 非阻塞/异步IO(callback)
汇编调用C程序
本程序用keil5实现. keil4会将C程序的地址设为0x00000000,即一开始就运行C程序了,参数都还没设置好.这个错误我也没深究,因为我自己装的是keil5. 首先需要在汇编代码中给C程序指 ...
Oracle11gR2导入导出实战之物化视图prebuilt
源实例上创建表物化视图 oracle@localhost admin]$ sqlplus system/oracle@orcl2 SQL*Plus: Release 11.2.0.4.0 Produ ...
nginx的location和rewrite
1 Nginx rewrite基本语法 Nginx的rewrite语法其实很简单.用到的指令无非是这几个 set if return break rewrite 麻雀虽小,可御可萝五脏俱全.只是简单的 ...
Shell32.ShellClass服务器操作系统无法获取音频文件时长问题
前言: 上传音频文件,自动写入此音频文件的时长,这里用 COM组件Microsoft Shell Controls And Automation来实现. 首先 1.引用:Microsoft Shell ...

javascript总结36:DOM-点击按钮切换图片案例

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

随机推荐

热门专题