代码用途：

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

代码：

 <!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. Linux 命令查询工具

    http://man.linuxde.net/traceroute http://man.linuxde.net/ping http://man.linuxde.net/nslookup 等等

  2. python中list、tuple、dict、set的使用

    1.list列表 list是一种可变的,有序的列表,可以随时添加和删除其中的元素. 其格式如下:list-name=[element1,element2,....] >>> nums ...

  3. 一、SQL应用（工作中遇到的根据表的某列的值不同，采用的不同列关联表）

    一.工作总结: 今天工作中遇到了这样一个需求,具体是根据某张表的某一列值得不同,进行不同关联操作.起初自己的想法是采用UNION操作,把两种情况连接起来,但是会出现一个问题,当进行动态传值SQL拼接的 ...

  4. Mysql SQL优化系列之——执行计划连接方式浅释

    关系库SQL调优中,虽然思路都是一样的,具体方法和步骤也是大同小异,但细节却不容忽视,尤其是执行计划的具体细节的解读中,各关系库确实有区别,特别是mysql数据库,与其他关系库的差别更大些,下面,我们 ...

  5. openssl实现双向认证教程（服务端代码+客户端代码+证书生成）

    一.背景说明 1.1 面临问题 最近一份产品检测报告建议使用基于pki的认证方式,由于产品已实现https,商量之下认为其意思是使用双向认证以处理中间人形式攻击. <信息安全工程>中接触过 ...

  6. vue 列表选中 v-for class

    地址: https://jsfiddle.net/50wL7mdz/96567/ 列表循环,默认选择 样式控制 <script src="https://unpkg.com/vue&q ...

  7. CentOS下安装JDK-rpm文件

    1.下载JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html. 测试 ...

  8. Ubuntu16.10下使用VSCode开发.netcore

    按照通常的套路,首先创建一个空白的解决方案,需要用到.netcore sdk命令: dotnet new sln -o dotnetcore_tutrorial 这个时候可以看到在目标目录下生成了一个 ...

  9. react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 5.react如何在路由里面定义一个子路由?   a.引入在需要子路由的页面引入Rout ...

  10. 深度学习caffe测试代码c++

    #include <caffe/caffe.hpp> #include <opencv2/core/core.hpp> #include <opencv2/highgui ...