js鼠标事情

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>7-70 课堂演示</title>
<style type="text/css">
div{
background: green;
padding: 20px;
width: 150px;
height: 150px;
left: 15px;
position: relative;
}
</style>
</head>
<body>
<div id="div1"></div>
<hr>
<input type="button" id="btn1" value="myFun1" ondblclick="myFun1()">
<input type="button" id="btn2" value="myFun2" >
<script>
var div1=document.getElementById('div1');
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2'); function myFun1(){
div1.innerHTML='<h2>鼠标双击事件</h2>'
div1.style.border='2px solid orange'
}
function myFun2(){
div1.innerHTML = "你在 div 中点击了鼠标右键!";
div1.style.color = "orange";
}
function myFun3() {
div1.innerHTML=('<h3>鼠标按下')
div1.style.color='red'
} function myFun4() {
div1.innerHTML=('<h3>鼠标松开')
div1.style.color='red'
}
function myFun5() {
div1.innerHTML=('<h3>鼠标移入')
div1.style.color='red'
}
function myFun6() {
div1.innerHTML=('<h3>鼠标移开')
div1.style.color='red'
} //鼠标按下
div1.onmousedown=myFun3
//鼠标松开
div1.onmouseup=myFun4
//鼠标移入
div1.addEventListener('mouseover',myFun5)
//鼠标移开
div1.addEventListener('mouseout',myFun6)
//鼠标右键单击事件
div1.addEventListener('contextmenu',
function (){
div1.innerHTML = "你在 div 中点击了鼠标右键!";
div1.style.color = "orange";
})
</script>
</body>
</html>

js鼠标事情的更多相关文章

  1. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  4. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  5. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  6. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

  7. js鼠标划过事件

    js鼠标划过事件一般有两对 onmouseover/onmouseout onmouseenter/onmouseleave 区别: 1.onmouseover/onmouseout 鼠标经过自身会触 ...

  8. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  9. js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

随机推荐

  1. python 1-1模块介绍和使用

    1. 什么是模块 1.1 模块就是一系列功能的集合体 1.1.1 模块有三种来源 1.内置的模块 2.第三方的模块 3.自定义模块 1.1.2 模块的格式: 1.使用Python编写的.py文件 2. ...

  2. 零基础入门学习Python(9)--了不起的分支和循环3

    前言 本节继续介绍分支和循环 知识点 while循环 Python while循环与if条件分支有点类似,在条件为真的情况下,执行某一段指定的代码.不同的是只要条件为True,while循环就会一直重 ...

  3. redis(以php代码为例)

    备注:redis及phpredis扩展安装请查看:PHP典型功能与Laravel5框架开发学习笔记 redis具有原子性,所以在高并发情况下确保数据的一致性 一.连接 $redis = new Red ...

  4. 输出一定范围unicode对应符号

    #本程序没有考虑对0x的处理,请勿输入,直接输入16进制位即可 begin = input("起始点:") end = input("结束点:") b_int0 ...

  5. windows系统安装虚拟机VMware12,然后在虚拟机中安装Red Hat Enterprise Linux6操作系统

    准备工作下载百度网盘: https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&rsv_spt=1&rsv_iq ...

  6. Jmeter关联-获取token值

    1. token就是令牌,比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件:也叫关联 2. cookie就是写在客户端的一个txt文件,里面包括你登录信息之类的,这样你下次在登录某 ...

  7. java生成6位随机数字

    //生成6位随机数字 System.out.println((int)((Math.random()*9+1)*100000)); //生成5位随机数字 System.out.println((int ...

  8. [luoguP1578] 奶牛浴场(DP)

    传送门 O(s2)算法 详见论文 王知昆--浅谈用极大化思想解决最大子矩形问题 我就复制你能把我怎么样QAQ #include <cstdio> #include <iostream ...

  9. android view自定义

    转载自:http://blog.csdn.net/iispring/article/details/50708044

  10. nyoj_758_分苹果

    分苹果 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法? (注意:假如有3个盘子7 ...