图片逐渐由看不见到模糊，最后清晰显示;鼠标点击图片后，图片依照1、2、3、4顺序依次循环显示;鼠标移入图片区域，图片放大 

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>
posted @ 2017-03-20 17:51  胡智杰  阅读(275)  评论(0)  编辑  收藏  举报