图片移入变大 点击图片切换 点击按钮显示图片
<!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>