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

最新推荐文章于 2023-11-23 15:56:32 发布

F2E前端爱好者

最新推荐文章于 2023-11-23 15:56:32 发布

阅读量1.6k

点赞数

分类专栏： javascript css3 jquery web应用 lkmusic

本文链接：https://blog.youkuaiyun.com/laike1355/article/details/51316036

版权

javascript 同时被 3 个专栏收录

35 篇文章

订阅专栏

jquery

22 篇文章

订阅专栏

css3

21 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现图片悬停时显示不同图像的效果。通过设置图片属性并在JavaScript中监听鼠标悬停事件来切换源图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');
         };
    }
};