js入门--鼠标触碰图标变换

最新推荐文章于 2023-08-01 09:08:57 发布

不服就Gan

最新推荐文章于 2023-08-01 09:08:57 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_23946481/article/details/88751776

博客介绍了通过JS实现图标变换图片效果的方法。利用JS逐渐改变原图片样式达成效果，还提及所需的JS基本语法，给出全部代码及注释，并进行了效果展示。

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

实现方法

所有的素材都在这张图片上，通过js逐渐改变原图片的样式，从而达到图标变换图片的效果
所需要的js基本语法

var t = setInterval(f(),time)	此方法为每隔time毫秒执行一次f()
clearInterval(t)	停止此方法
str.test(newstr)	正则表达式，测试str中是否包含newstr
var new = str.replace(/.$/,’’)	正则表达式，替换其中所有的数字变为’’，结果赋给new

全部代码及注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {text-align: center}
        table {border:1px solid #EEEEEE;padding: 3px;border-bottom-width: 5px}
        .icon td {width:50px;height:37px;background-image: url("MENU_ICO.GIF")}
    </style>
</head>
<script>
    window.onload = function(){
        var tt = document.getElementsByTagName('table')[0];//获取table标签对象
        var osrc = tt.rows[0].cells,otarget = tt.rows[1].cells;//获取table中每行的对象
        for(var i=0;i<osrc.length;i++){
            var position = -i*37;
            osrc[i].style.backgroundPositionY = String(position)+'px';//初始化每个小图标的位置
            transform(osrc[i],otarget[i]);
        }
    }
    function transform(osrc,otarget) {
        var positionX=['0px','-51px','-101px','-153px','-205px','-257px','-306px'];
        otarget.onmouseover = otarget.onmouseout = function (e) {
            var k = /mouseover/.test(e.type)?1:-1;//var k = (e.type=="mouseover")?1:-1;二者等价
            var position = 0,times=0;
            var t = setInterval(function () {
                if(times++==7){
                    times=0;
                    return clearInterval(t);
                }
                var index = k>0?times:7-times;
                osrc.style.backgroundPositionX = positionX[index];
            },300/7);
        };
    }
</script>
<body>
<table>
    <tr class="icon">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td>
    </tr>
</table>
</body>
</html>

效果展示

大功告成！