代码用途：

通过点击图片，来改变图片内容

代码：

 <!DOCTYPE html>

 <html>

 <body>

 <script>

 function changeImage()

 {

     element=document.getElementById('im')

     if (element.src.match("2"))

      {

           element.src="./1.jpg";

      }

     else

      {

           element.src="./2.jpg";

       }

 }

 </script>

 <img id="im" onclick="changeImage()" src="./2.jpg">

 <p>君莫笑是冠军~~</p>

 </body>

 </html>

效果图：

1.开始的时候，图片是个这样子的~

2.点击图片后，图片变成这样的啦~

JS之鼠标改变img的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. js获取select改变事件

    js获取select改变事件onchage前的值 和 onclick事件 <select id="wupin_id" name="wupin_id" on ...

  4. js实现鼠标的滑动

    js实现鼠标的滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. js获得鼠标的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  7. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  8. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  9. JS Event 鼠标拖拽事件

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

随机推荐

  1. miniui 使用心得

    MiniUI demo实例使用心得:1.渲染速度很快2快速维护数据 3多种编辑方式 如 弹窗 直接下方显示form 下方显示tab 等4.树形 编辑 联动 5验证表单6文本框内 选择框 保存的多个选项 ...

  2. Oracle 拼接字符串

    Tom大神写的 CREATE OR REPLACE FUNCTION stragg(input varchar2) RETURN varchar2 PARALLEL_ENABLE AGGREGATE ...

  3. centos7.0 64位系统 安装PHP5.3 支持 nginx

    1  安装PHP所需要的扩展 yum -y install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel curl cur ...

  4. do_bootrk

    1. LMB (logical memory blocks) lmb为uboot下的一种内存管理机制,用于管理镜像的内存.lmb所记录的内存信息最终会传递给kernel.在/include/lmb.h ...

  5. 服务注册和发现（Consul）

    使用Consul提供注册和发现服务 什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul ...

  6. nodejs项目文件搭建环境

    nodeJS,作为一门较为“新鲜的”的原因,近年来普遍受到一些前端想转为全栈的ITer青睐,在想用nodeJS配合数据库开发出一个小玩意的路上,萌新们第一步便要遇到就是环境的支持.node作为Java ...

  7. OO Summary Ⅲ

    规格化设计的发展历史 (这一部分并没有找到答案,于是参考了好黄和温莎莎的blogs) 1950年代,第一次分离,主程序和子程序的分离程序结构模型是树状模型,子程序可先于主程序编写.通过使用库函数来简化 ...

  8. 程序从sqlserver2008搬家到MySQL5.6

    1.数据表结构的搬家 SqlServer的建表sql语句在MySQL中肯定不能运行 这里使用转换工具 下载地址: https://download.csdn.net/download/zhutouai ...

  9. springMVC操作cookie和session

    cookie相关说明: 1.cookie由服务器端创建,然后添加到HttpServletResponse中发送给客户端(浏览器). 2.可以添加多个cookie键值对. 3.cookie由键值名和键值 ...

  10. Flatten Nested List Iterator

    Given a nested list of integers, implement an iterator to flatten it. Each element is either an inte ...