图片更换路径

 

大家都知道CSS中有个hover伪类。能够在鼠标移动到对应元素上方时元素样式改变为伪类中所设置的样式，鼠标移开后又恢复为原来的样子，但作用局限于所选元素级其后代元素。

而在JavaScript的函数库jQuery中拥有类似效果的是由mouseover（）方法触发的mouseover事件和由mouseout（）方法触发的mouseout事件，没有局限性。

这里就举一个例子。

 

这是一个项目的布局，上方是系统划分的各个功能块导航，左边是选中部分的模块显示区域。

这里要做的就是，在鼠标出入划分的各个部分导航是有一个图标的，如果（假若）只有导航背景颜色和高亮背景颜色的图标图片，又要在鼠标移入时有高亮效果，那就要将图片进行替换。

高亮效果的整体背景颜色变化可以用CSS伪类，也可以在换图片的时候写进去。

1. 首先在点击导航部分时，选中部分获得高亮效果，左侧要进行模块显示区域的替换。

这里先是将选中高亮和显示区域先去掉，根据一些不同之处遍历找到。

区域的显示、隐藏实现是用bootstrap4插件的d-block类和d-none类的添加和去除，可作为依据。

高亮部分有颜色变化的特征可作为依据。

这个功能的实现方法，$("#mokuai").find("li").click(function () {}选择到导航划分的部分绑定点击事件，若有功能部分被点击，执行其中函数。

 

$("aside").each(function () {

                   if ($(this).hasClass("d-block")) {

                       $(this).removeClass("d-block");

                       $(this).addClass("d-none");

                    }

          });

 

遍历区域，有显示类的去掉。

$("#mokuai").find("li").each(function () {

                    if (typeof ($(this).attr("style") == "background:#105488;")) {

                        $(this).attr("style", "");

                        }

               })

 

遍历功能块，有高亮颜色的去掉颜色。图片更换看下面。

去掉之后就是添加，如何根据选中功能块显示对应的区域呢。

我是看排序，在HTML中的排序。功能块和对应区域在同胞标签中的序号是相同的。

 

$("aside").eq($(this).index()).removeClass("d-none");

  $("aside").eq($(this).index()).addClass("d-block");

 

Eq（）方法选择到所填序号的元素，index（）返回所选元素的序号。

返回点击元素的序号选择到对应区域进行操作。

声明一个全局变量var index；在此处赋值序号，index = $(this).index();

 

$(this).attr("style", "background:#105488;");// 将高亮颜色添加。

 

$("#mokuai").find("li").mouseover(function () {})

选择到导航划分的部分绑定鼠标移入事件

移入移出的图片更换是与已经选中的功能块无关的，这样就要排除掉选中功能块。

这时就要用到全局变量index，上面已经对它赋值了选中的功能块序号。但若是没有点击事件发生，就不会进行赋值。

 

    $("aside").each(function () {

      if ($(this).hasClass("d-block")) {

            index = $(this).index() - 1;

           }

    })

所以移入时遍历区域，对index进行显示区域序号的赋值。在出入事件中根据index将选中功能块排除。

接下来就是图片的更换，如何更换到正确的图片呢。

将导航颜色图片名称改为XXA、XXB、XXC……，高亮色图片改为XXAS、XXBS、XXCS……。这样对应的图片名称就只是多或少了一个S。

 

var src = $(this).find("img").attr("src");

获取移入功能块的图片路径

var srcs = src.replace(src.slice(33, -3), "s.");

 

replace()方法能够替换字符串，slice()方法能够根据所填前后下标截取部分字符串并返回。这里截取原本路径的“.”替换为“s.”,这样就改为了对应的高亮色图片。

 

     $(this).find("img").attr("src", srcs);

Attr()方法将图片路径更改。

 

Mouseout()鼠标移出事件写法是一样的，就是替换字符串时是将s去掉。

      var srcs = src.replace(src.slice(33, -3), ".");

 

还有就是上面没写的点击事件中图片的更换，同理。

这样就可以了

 

其实如果只是更换图片的背景色，是不需要这么做的。但这是举例，想象成不同的图片也一样。用来实现的功能也许很low，但方法是是不会差的。