在我们浏览网页时,往往会被一些不起眼的小交互吸引注意力,从而生出兴趣想去点击.这些效果不需要复杂的逻辑,也不需要花哨的视觉效果.只要在合适的位置放一个巧妙的反馈,就能让用户在操作中感受到页面的“灵性”.

今天,就让长沙网站建设教您,如何实现一列并排显示图片的悬停聚焦效果.

从上图可以看到,页面初始排列了几张图片.除了第二张图片是完整展示,其余几张都是只显示一部分出来.此时将鼠标移动到任意一张图片上时就会触发效果,这张图片会渐渐展开直到完整展示,而之前已展开的图片则会顺势收拢,直到宽度与其余图片一致.在这时,我们的目光焦点自然而然就聚集到了刚刚悬停展开的图片上了.

本次效果的核心还是JavaScript代码:

(function() {
    const pics = document.querySelectorAll('.pic');
    pics.forEach(function(pic) {
         pic.addEventListener('mouseenter', function() {
             pics.forEach(function(p) {
                  p.classList.remove('hover');
             });
             pic.classList.add('hover');
         });
    });
    pics[0].classList.add('hover');
})();

长沙网站制作使用mouseenter事件来监听鼠标有没有进入图片区域.一旦监听到则会触发代码,首先移除所有图片的类名"hover",再为被进入的图片添加"hover".提前在CSS代码中设置的"hover"样式就会立即生效,拥有这个类名的图片将开始平滑展开,其余的图片则会同步收拢.整个效果非常简单,只需要轻轻的移动鼠标,就能完成一次图片聚焦切换.

完整HTML与JavaScript代码如下:

效果演示视频如下:

以上就是长沙网站开发出的鼠标悬停图片聚焦效果,希望对您有所帮助！

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业的发展保驾护航！欢迎来电咨询:0731-84069615。