首页
前端开发
Javascript
图片上下切换JavaScript鼠标移动自动切换展示

图片上下切换JavaScript鼠标移动自动切换展示

0 次浏览 0 条评论
rar
rar

图片上下切换的图片展示方式挺实用的，尤其适合做产品详情页、人物展示页那种场景。右边三张小图，鼠标一移上去，左边大图就自动切换，看起来顺滑又直观。

图片切换的原理不复杂，靠的就是JavaScript事件监听，加上CSS3的过渡动画来搞定。最常见的用法是监听mouseover事件，更新主图的src属性。

比如用jQuery来实现，会方便：

$(document).ready(function() {
  var $mainImage = $('#main-image');
  $('.carousel img').hover(function() {
    var src = $(this).attr('src');
    $mainImage.fadeOut(400, function() {
      $(this).attr('src', src).fadeIn(400);
    });
  });
});

主图的 ID 是#main-image，右边三张图加个类名.carousel就行。逻辑就是鼠标一碰上去，换图再加个淡入淡出效果，看起来还挺高级的。

样式上你可以通过CSS来控制布局，比如图片的大小、间距、浮动之类的，用display: flex或者float: left都能搞。过渡动画加上transition: all 0.4s也顺滑。

如果你更习惯用Vue或React，那就用onMouseOver绑定事件，在组件状态里更新图片路径就行，逻辑是一样的。

嗯，如果你想多看看类似的效果，可以翻翻这些资源：CSS3 鼠标经过图片特效合集，还有图片切换动画合集也挺有参考价值。

这个功能小而美，适合做交互增强，代码也不复杂。你要是做展示类项目，建议试试看。压缩包里的demo文件也可以直接跑起来看看效果。

rar 文件大小：146.3KB