<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
综合练习三
</div>
<div>
<img src="images/1.jpg" alt="" width="192"/>
</div>
<br/><br/>
<div>鼠标移入图片区域，图片放大</div>
<br/><br/><br/>
<script>
document.images[0].onmouseover=function(){
// 设置父元素的大小
this.parentNode.style.width = this.width+'px';
this.parentNode.style.height = this.height+'px';
// 设置当前图片为绝对定位
this.style.position = 'absolute';
this.width = this.width*2;
}
document.images[0].onmouseout=function(){
this.width = this.width/2;
}
</script>
<hr/>
<div>
综合练习四
</div>
<div>
<img src="images/1.jpg" alt="" width="192" height="120"/>
</div>
<br/><br/>
<div>要求：鼠标点击图片后，图片依照1、2、3、4顺序依次循环显示</div>
<br/><br/><br/>
<script>
document.images[1].onclick=function(){
var begin = this.src.lastIndexOf('/');
var end = this.src.lastIndexOf('.');
var num = this.src.substring(begin+1, end);
num = parseInt(num)+1;
if(num>4) num=1;
this.src = 'images/'+num+'.jpg';
}
</script>
<hr/>
<div>
综合练习五
</div>
<div>
<img src="images/1.jpg" alt="" style="display: none;" width="192"/>
</div>
<br/><br/>
<button id="btnshow">显示图片</button>
<div>要求：点击按钮后，图片逐渐由看不见到模糊，最后清晰显示</div>
<script>
var opnum=0.02, imgtime;
function showimg(){
var img3 = document.images[2];
opnum+=0.02;
img3.style.opacity=opnum;
img3.style.display='inline';
if(opnum>=1)
clearInterval(imgtime);
}
document.getElementById('btnshow').onclick=function(){
var img3 = document.images[2];
img3.style.opacity=0;
img3.style.display='inline';
this.disabled = true;
imgtime=setInterval(showimg, 200);
}
</script>
</body>
</html>