一、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.jpg
imgobj.onclick=function(){
//属性改变:改变图片为b.png
imgobj.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 //键盘键弹起触发事件:在验证码栏输入