代码用途:

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

代码:

 <!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. centos命令行系列之升级glibc到

    1.从http://ftp.gnu.org/gnu/glibc/glibc-2.17.tar.gz 下载文件 2.安装部署 [root@kafzook1 /]# tar -xf glibc-2.17. ...

  2. 牛客网多校第3场Esort string (kmp)

    链接:https://www.nowcoder.com/acm/contest/141/E 来源:牛客网 题目描述 Eddy likes to play with string which is a ...

  3. vue-navigation 实现前进刷新,后退不刷新

    vue-navigation GitHub地址 导航默认行为类似手机APP的页面导航(A.B.C为页面): A前进到B,再前进到C: C返回到B时,B会从缓存中恢复: B再次前进到C,C会重新生成,不 ...

  4. 微信小程序: rpx与px,rem相互转换

    官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx,则1rem=750/20rpx. 微信官方建议视觉稿以iPhone 6为标准:在 iPhone6 上,屏幕宽度为375px,共有750个物理像 ...

  5. git rebase commit 信息处理

    pick:正常选中 reword:选中,并且修改提交信息: edit:选中,rebase时会暂停,允许你修改这个commit(参考这里) squash:选中,会将当前commit与上一个commit合 ...

  6. python 转换代码格式

    import os dirname="C:\\Users\\haier\\Desktop\\new" def walk(path): for item in os.listdir( ...

  7. python+ajaxFileUpload 无刷新上传文件

    需要准备文件 http://pan.baidu.com/s/1bp4N3nL   qqi0 html <script src="{% static 'js/jquery.js' %}& ...

  8. Win10系列:VC++ 定时器

    计时器机制俗称"心跳",表示以特定的频率持续触发特定事件和执行特定程序的机制.在开发Windows应用商店应用的过程中,可以使用定义在Windows::UI::Xaml命名空间中的 ...

  9. C++解析六-继承

    面向对象程序设计中最重要的一个概念是继承.继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易.这样做,也达到了重用代码功能和提高执行时间的效果.当创建一个类时,您不需要重新编 ...

  10. Java日期时间,以及相互转换

    Java日期时间,以及相互转化 package com.study.string; import java.text.ParseException; import java.text.SimpleDa ...