代码用途：

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

代码：

 <!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. HDU-4587-tarjin/割点

    http://acm.hdu.edu.cn/showproblem.php?pid=4587 给出一幅无向图,问除去两个点之后子图的最大联通分量个数. 考虑每次ban一个点然后跑一遍tarjin统计下 ...

  2. Oracle11g温习-第十二章：tables

    2013年4月27日 星期六 10:44 1.表的功能 存储.管理数据的基本单元(二维表:由行和列组成) 2.表的类型  1)普通表:[heap table(堆表) :数据存储时,无序的,对它的访问采 ...

  3. InnoDB存储引擎介绍-(3)InnoDB缓冲池配置详解

    原文链接  http://www.ywnds.com/?p=9886 一.InnoDB缓冲池 InnoDB维护一个称为缓冲池的内存存储区域 ,用于缓存内存中的数据和索引.了解InnoDB缓冲池的工作原 ...

  4. 网络编程socketserver实现并发

    import socketserver import struct import json import os class FtpServer(socketserver.BaseRequestHand ...

  5. [CodeForces - 614C] C - Peter and Snow Blower

    C - Peter and Snow Blower Peter got a new snow blower as a New Year present. Of course, Peter decide ...

  6. Qt绘制文本二 弯曲排列和旋转效果 弧形路径 正弦函数路径

    void WgtText::paintEvent(QPaintEvent *event) { QPainter painter(this); QString m_string("abcdef ...

  7. summary_22rd Nov 2018

    一. 列表:记录同种属性的多个值 定义:在[]中用逗号分隔开多个任意的值 类型转换:L=list( )  括号中的内容必须是可迭代类型,包括字符串,列表,字典等 常用操作和内置方法: 1.按照索引位置 ...

  8. jdk settings

    JAVA_HOME   D:\envs\jdk\jdk8\jdk18045\jdk1.8.0_45   CLASSPATH   .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\to ...

  9. Node.js是用来干嘛的

    如果你去年注意过技术方面的新闻,我敢说你至少看到node.js不下一两次.那么问题来了“node.js是什么?”.有些人没准会告诉你“这是一种通过JavaScript语言开发web服务端的东西”.如果 ...

  10. ActiveMQ的安装与配置

    ActiveMQ的安装与配置详情 (1)ActiveMQ的简介 MQ: (message queue) ,消息队列,也就是用来处理消息的,(处理JMS的).主要用于大型企业内部或与企业之间的传递数据信 ...