<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /> <title>图片列表：鼠标移扒迅昌入/移出改变图片透明度</title> <style> ul,li{margin:0padding:0list-style-type:none}
#imgList{width:700pxoverflow:hiddenzoom:1border:1px solid #333margin:0 autopadding:0 0 10px 10px} 昌册 #imgList li{float:leftwidth:128pxheight:128pxborder:1px solid #cccmargin:10px 10px 0 0} #imgList li img{float:leftopacity:0.3cursor:crosshairfilter:alpha(opacity=30)}
#imgList li.current img{opacity:1filter:alpha(opacity=100)} </style> <script> window.onload = function () { var oLi = document.getElementsByTagName("li") for (var i = 0i <oLi.length
i++) { oLi[i].onmouseover = function () { this.className = "current" } oLi[i].onmouseout = function () { this.className = "" } } } </script></head> <body> <ul id="imgList"> <春扒li><img src="/jscss/demoimg/201203/kitesky_com_car1.jpg" /></li> <li><img
src="/jscss/demoimg/201203/kitesky_com_car2.jpg" /></li> </ul> </body> </html>
1.mousewheel鼠标滚轮事件
**获取当前滚轮的值 **
如果 值 小于 0 滚轮 往下滑
如果 值 大于0 滚轮 往上滑
1. onclick 单击事件
2.ondblclick 双击事件
当给 同一个格子 同时绑定双击和点击事件时
会触发 双击事件 必定会触发两次单击事件
ondblclick = function (){
3.oncontextmenu 鼠标右键
鼠标右键 是一个有默认功能的事件 它可以打开右键菜单
4.鼠标释放事件 onmouseup
鼠标按下不会触发 松开的时候 才会触发
5.鼠标按下事件 onmousedown
1.鼠标移入事件 一共有两种
第一种就是obmouseover 和 onmouseout
（1）鼠标移入 onmouseover
（2）鼠标移出 onmouseout
给父级绑定了事冲察搜件 子级没有绑定事件
但是 当鼠标移入子级的时候 会触发 父级的事件
这种情况叫做事件冒泡
第二种 鼠标移出事件 onmouseenter 和 onmouseleave
1.鼠标移入 onmouseenter
2.鼠标移出 onmouseleave
鼠标移入移出 有两种写法
共同点： 就是鼠标移入移出的方法、、
不同的：
第一种 onmouseover 和 onmouseout 会触发事件冒泡
第二种 onmouseenter 和 onmouseleave 不会触发事件冒泡
3.鼠标移动事件 onmousemove
box.onmousemove = function (){
consoloe.log('鼠标移动事件')
}
鼠标的坐标 在 鼠标事件的 事件对象中保存
所以我们要获取散历 鼠标坐标 一般都是通过事件对象 event 获取
所有的鼠标事件 都可以 通过 事件对象来获取 鼠标坐标
但是 通常 我们都是在 鼠标移动没逗事件中获取 和 使用 鼠标坐标
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）