一、JS特效
1.事件触发
2.属性改变
3.样式改变
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>img{cursor: pointer; /*鼠标移动到img上方变成小手*/} </style>
</head>
<body><img src="a.jpg" id="imgid" >
</body>
<script>//JS特效imgobj=document.getElementById('imgid');//事件触发：点击图片a.jpgimgobj.onclick=function(){//属性改变：改变图片为b.pngimgobj.src='b.png';//样式改变：给图片设置边角弧线imgobj.style.borderRadius='256px';}
</script>
</html>
二、绑定事件
1.标签身上绑定（不建议用，代码冗长的话不合适）
<body><img src="a.jpg" id="imgid" onclick="this.src='b.png'">
</body>
2.JS代码中绑定
如第一段代码
三、鼠标事件
? onclick //点击后触发事件
? ondblclick //双击后触发事件
? onmouseenter //鼠标移入触发事件
? onmouseleave //鼠标移出触发事件
? onmousemove //鼠标移动触发事件
举例：鼠标移动获取鼠标在文档内的坐标
实例：循环单击实现单击后，a、b图片循环
<script>imgobj=document.getElementById('imgid');i=0;imgobj.onclick=function(){if(i%2==0){imgobj.src="a.jpg";}else{imgobj.src="b.png";}i++;}
</script>
四、键盘事件
? onkeydown //按下键盘键触发事件
实例：按上下左右键实现图片在网页上的移动
? onkeyup //键盘键弹起触发事件：在验证码栏输入验证码弹出验证码的值
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title>
</head>
<body><form action=""><p>用户名：</p><p><input type="text" /></p><p>密码：</p><p><input type="password" /></p><p>验证码：</p><p><input type="text" id="verify" /></p><p><input type="submit" value="OK" /></p></form>
</body>
<script>vobj=document.getElementById('verify');vobj.onkeyup=function(){val=this.value;alert(val);}
</script>
</html>
? onkeypress //不常用
五、获取网页的3个高度
1.有效的高-屏幕可视的高
document.documentElement.clientHeight
实例：JavaScript实现上下弹力球特效
2.屏幕的总高度-屏幕的总高度
document.documentElement.scrollHeight
3.滚动的高-滚动的高度
document.documentElement.scrollTop
document.body.scrollTop(chrome)