代码用途：

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

代码：

 <!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. Nginx配置——区分PC或手机访问不同域名

    新官网上线,但在手机上访问新官网的体验很差,要求在手机上访问新官网时访问旧官网,可以通过修改Nginx配置来实现自动跳转.首先是新官网的Nginx配置文件加个跳转判断,通过user-agent判断来源 ...

  2. python使用MySQLdb模块连接MySQL

    1.安装驱动 目前有两个MySQL的驱动,我们可以选择其中一个进行安装: MySQL-python:是封装了MySQL C驱动的Python驱动:mysql-connector-python:是MyS ...

  3. CSS知识点（一）

    一.引入CSS样式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样 ...

  4. Test22455

  5. 学习笔记-AngularJs（七）

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  6. \x 和 0x 的区别

    1.0x 表示整型数值 (十六进制) char c = 0x42; 表示的是一个数值(字母B对应的ASCII码——  66),可以认为等价于: int c = 0x42; 2.\x42用于字符表达,或 ...

  7. DAY27.XIA.面向對象

    2018-07-23  08:43:17

  8. WPF 之 TreeView节点重命名

    下面的TreeView节点是通过数据双向绑定的方式,绑定到TextBlock控件和TextBox控件的Text属性上,并且让两者绑定相同的属性,同时使TextBox控件刚好完全覆盖TextBlock控 ...

  9. HTML(五)选择器--伪类选择器

    HTML代码 <body> <a href="www.baidu.com">www.baidu.com</a> </body> CS ...

  10. bind配置文件

    options{} - 整个bind使用的全局配置选项 bind监听的端口,数据文件存储位置,缓存的存储位置,权限加密的控制 logging{}- 服务日志选项 日志输出的位置,以及输出的级别 zon ...