JS之鼠标改变img
代码用途:
通过点击图片,来改变图片内容
代码:
<!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的更多相关文章
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- js获取select改变事件
js获取select改变事件onchage前的值 和 onclick事件 <select id="wupin_id" name="wupin_id" on ...
- js实现鼠标的滑动
js实现鼠标的滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- js获得鼠标的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- centos命令行系列之升级glibc到
1.从http://ftp.gnu.org/gnu/glibc/glibc-2.17.tar.gz 下载文件 2.安装部署 [root@kafzook1 /]# tar -xf glibc-2.17. ...
- 牛客网多校第3场Esort string (kmp)
链接:https://www.nowcoder.com/acm/contest/141/E 来源:牛客网 题目描述 Eddy likes to play with string which is a ...
- vue-navigation 实现前进刷新,后退不刷新
vue-navigation GitHub地址 导航默认行为类似手机APP的页面导航(A.B.C为页面): A前进到B,再前进到C: C返回到B时,B会从缓存中恢复: B再次前进到C,C会重新生成,不 ...
- 微信小程序: rpx与px,rem相互转换
官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx,则1rem=750/20rpx. 微信官方建议视觉稿以iPhone 6为标准:在 iPhone6 上,屏幕宽度为375px,共有750个物理像 ...
- git rebase commit 信息处理
pick:正常选中 reword:选中,并且修改提交信息: edit:选中,rebase时会暂停,允许你修改这个commit(参考这里) squash:选中,会将当前commit与上一个commit合 ...
- python 转换代码格式
import os dirname="C:\\Users\\haier\\Desktop\\new" def walk(path): for item in os.listdir( ...
- python+ajaxFileUpload 无刷新上传文件
需要准备文件 http://pan.baidu.com/s/1bp4N3nL qqi0 html <script src="{% static 'js/jquery.js' %}& ...
- Win10系列:VC++ 定时器
计时器机制俗称"心跳",表示以特定的频率持续触发特定事件和执行特定程序的机制.在开发Windows应用商店应用的过程中,可以使用定义在Windows::UI::Xaml命名空间中的 ...
- C++解析六-继承
面向对象程序设计中最重要的一个概念是继承.继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易.这样做,也达到了重用代码功能和提高执行时间的效果.当创建一个类时,您不需要重新编 ...
- Java日期时间,以及相互转换
Java日期时间,以及相互转化 package com.study.string; import java.text.ParseException; import java.text.SimpleDa ...