html<html<head lang="en"<meta charset="UTF-8"<titletitle</head<body<div</div<div<img src="images/1.jpg" alt="" width="192"</div<brbr<div</div<brbrbr<scriptdocument.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<brbr<div</div<brbrbr<scriptdocument.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<brbr<button id="btnshow"</button<div</div<scriptvar 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>
时间: 2024-10-10 10:39:02