关于for循环内部click事件绑定传参的问题 2016.10.17

最新推荐文章于 2022-04-06 12:17:36 发布

转载最新推荐文章于 2022-04-06 12:17:36 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/relstart/p/5969929.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的鼠标悬停时背景图切换的效果。通过修改URL中的图片名称，实现了图片在悬停和非悬停状态下的平滑过渡。此效果适用于网站按钮或其他UI元素，增强用户交互体验。

<script type="text/javascript">
    $(function() {
        var li = $('.se-btn li');
        var pattern = 'images/ser';

        for (var i = 0; i < 9; i++) {
            (function(i) {
                var url = li.eq(i).find('span').css('background-image');
                var length = url.split('').length;          //获取url的长度
                var ind1 = url.search(pattern);             //返回字符串中 pattern开始位置
                var qian = url.slice(0, ind1 + 10);         //前面的字符串
                var hou = url.slice(ind1 + 10);             //后面的字符串

                li.eq(i).hover(function() {
                    $(this).find('span').css({
                        'background-image': qian + 'h' + hou //中间加个 'h'
                    });
                }, function() {
                    $(this).find('span').css({
                        'background-image': qian + hou
                    });
                });
            })(i);
        }

    });
    </script>