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

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>

js

window.onload=function(){
    var i = 0;
    for (i;ivar 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');
         };
    }
};

你可能感兴趣的:(javascript,css3,jquery,web应用,lkmusic)