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. CF1000G Two-Paths

    题目大意:给你一棵树,其中点上和边上都有值.定义2-Path为经过一条边最多两次的路径,价值为经过点的权值加和-经过边权值*该边经过次数.4e5组询问,每次询问树上连接x,y两点的2-Path的最大价 ...

  2. Java的类加载

    虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是Java虚拟机的类加载机制 ----类加载的大致过程 类的加载的过 ...

  3. [Python3网络爬虫开发实战] 1.7.1-Charles的安装

    Charles是一个网络抓包工具,相比Fiddler,其功能更为强大,而且跨平台支持得更好,所以这里选用它来作为主要的移动端抓包工具. 1. 相关链接 官方网站:https://www.charles ...

  4. list嵌套，int与str的用法，replace

    #*************************replace(待改,改动值),返回很重要 A = [['libai',89]] A[0][0]=A[0][0].replace('a','af') ...

  5. windows窗口过程函数名词解析

    windows窗口过程函数名词解析 LRESULT CALLBACK WndProc(HWND hwnd,UINT message,WPARAM wParam,LPARAM lParam) 1. LR ...

  6. [luoguP1981] 表达式求值（U•ェ•*U）

    传送门 弄两个栈,一个存数,一个存运算符,然后乱搞. 代码 #include <cstdio> #include <cstring> #include <iostream ...

  7. Linux下汇编语言学习笔记2 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  8. SOJ 2749_The Fewest Coins

    [题意]:已知整个交易系统有N (1 ≤ N ≤ 100)种不同的货币,分别价值V1,V2,V3.......VN(1 ≤ Vi ≤ 120),FJ分别有C1,C2,C3.....CN(0 ≤ Ci ...

  9. MongoDB小结14 - find【查询条件$lt $lte $gt $gte】

    $lt $lte $gt $gte 以上四个分别表示为:< . <= . > . >= . 通常的做法是将他们组合起来,以便查找一个范围. 比如,查询年龄在18到25岁(含)的 ...

  10. Oracle数据库导入导出简单备份

    oracle数据库简单备份 方法一: 1.导出 exp c##xmq/pwda@orcl owner=c##xmq file=C:/expdb.dmp buffer=8000 2.导入 2.1.删除原 ...