代码用途：

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

代码：

 <!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. 27. Remove Element C++移除元素

    网址:https://leetcode.com/problems/remove-element/ 双指针(广义) class Solution { public: int removeElement( ...

  2. 一、ZooKeeper学习

    一.什么是ZooKeeper? ZooKeeper是一个分布式应用的开源协调服务.目的就是给用户提供同步.配置管理.分组和命名等服务.是Java语言编写的,支持Java和C两种语言.通俗的讲,它就是用 ...

  3. 使用CSDN-markdown编辑器

    欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...

  4. Socket 初识 用Socket建立一个简易Web服务器

    摘自<Asp.Net 本质论>作者:郝冠军 //在.Net中.system.Net命名空间提供了网络编程的大多数数据据类型以及常用操作,其中常用的类型如下: /* IPAddress 类表 ...

  5. nginx支持HTTP2的配置过程

    一.获取安装包 http://zlib.net/zlib-1.2.11.tar.gz https://www.openssl.org/source/openssl-1.0.2e.tar.gz (ope ...

  6. Linux安装配置samba教程（CentOS 6.5）

    一.服务端安装配置samba 1.1 服务端安装samba yum install -y samba 1.2 创建共享目录并写入配置文件 以/samba为共享目录为例,为了更直观地观测我们在该目录中创 ...

  7. SpringBoot鸡汤(注解集合二)

    1.@NotNull :属性值不为空 2.@Profiles @Configuration @Profile("production") public class Producti ...

  8. Java并发机制及锁的实现原理

    同步的基本思想 为了保证共享数据在同一时刻只被一个线程使用,我们有一种很简单的实现思想,就是 在共享数据里保存一个锁 ,当没有线程访问时,锁是空的. 当有第一个线程访问时,就 在锁里保存这个线程的标识 ...

  9. ueeditor 百度编译器使用onchange效果

    <script id="editor" type="text/plain" style="width:100%;height:200px;&qu ...

  10. LY.JAVA面向对象编程思想概述

    面向对象 2018年7月5日  逆袭之旅DAY09 2018年7月5日  逆袭之旅DAY09 2018-07-07