优雅的图片翻转实现方式rollover.js

来源：互联网发布：html标签中使用js变量编辑：程序博客网时间：2024/05/16 07:06

html

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>         <style type="text/css">            img{                width:100px;                height:100px;                background: lightcoral;                display: inline-block;                margin-right:15px;            }        </style>    <img data-rollover="img/1.jpg"/>    <img data-rollover="img/2.jpg"/>    <img data-rollover="img/3.jpg"/>    <script src="js/rollover.js"></script>    </body></html>

window.onload=function(){    var i = 0;    for (i;i<document.images.length;i++) {         var img = document.images[i];         var src =img.getAttribute('data-rollover');         if(!src){             continue;         }         (new Image()).src = src;         img.setAttribute('data-rollout',img.src);         img.onmouseover=function(){            this.src = this.getAttribute('data-rollover');         };         img.onmouseout=function(){            this.src = this.getAttribute('data-rollout');         };    }};

0 0