代码用途：

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

代码：

 <!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. 判断runtime是否运行在docker中及从docker中获取宿主机的ip信息

    1.判断运行时环境是否运行在docker中 参考:How to determine if a process runs inside lxc/Docker? 确定进程是否在LXC/Docker中运行? ...

  2. Buffer和Stream

    Buffer JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.但在处理像TCP流或文件流时,必须使用到二进制数据. 因此在 Node.js中,定义了一个 Buffer 类,该类用 ...

  3. vijos1448校门外的树

    描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K=1,K=1,读入l.r表 ...

  4. oracle in 函数

    IN操作符      select * from scott.emp where empno=7369 or empno=7566 or empno=7788 or empno=9999:      ...

  5. angular 常用插件集合

    md5加密    https://www.npmjs.com/package/md5-typescript angular echarts  https://github.com/xieziyu/ng ...

  6. JS--script标签注意细节

    1)在使用<script>标签嵌入js代码时,记住不要在代码中的任何地方出现</script>字符串.例如: <script type="text/javasc ...

  7. Win10系列：VC++媒体播放控制4

    (7)音量控制 MediaElement控件具有一个Volume属性,通过设置此属性的值可以改变视频音量的大小.接下来介绍如何实现视频的音量控制,首先打开MainPage.xaml文件,并在Grid元 ...

  8. OO第一次课程总结分析

    作为一个之前从未使用过java语言,主攻面向过程式编程的“面向对象”小白,于是乎从第一次作业开始时利用时间疯狂学习java语言,经过三次作业的残酷洗礼,自己对面向对象式编程多多少少有了初步的了解(前路 ...

  9. 重写equals() 和 hashCode()方法

    什么情况下需要重写呢? 比如去重操作时, 有时候往Set集合存放对象User,我们User类的字段太多时,比如有50个字段, 判断两个User对象相同,不需要判断它们所有字段都相同,只需要判断它们的某 ...

  10. java关于集合的遍历与增强for循环（foreach)的使用

     java集合类的使用可以说是无处不在,总的我们可以将之分为三大块,分别是从Collection接口延伸出的List.Set和以键值对形式作存储的Map类型集合.      许多情况需要我们遍历出集合 ...