图片逐渐由看不见到模糊，最后清晰显示;鼠标点击图片后，图片依照1、2、3、4顺序依次循环显示;鼠标移入图片区域，图片放大
2024-09-09 15:09:18 219人阅读
html<html<head lang="en"<meta charset="UTF-8"<titletitle</head<body<div</div<div<img src=http://www.mamicode.com/"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=http://www.mamicode.com/"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 = http://www.mamicode.com/‘images/‘+num+‘.jpg‘;
}
script<hr<div</div<div<img src=http://www.mamicode.com/"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 