首页
前端开发
Javascript
jQuery相册悬停放大插件实例

jQuery相册悬停放大插件实例

0 次浏览 0 条评论
rar
rar

jQuery 的图片放大插件，用起来还挺顺手的。鼠标一靠近图片就自动放大，视觉效果不错，代码也简单。你只要加上mouseenter和mouseleave事件，再配合transform: scale，立马就能实现悬停放大。配个transition过渡，效果更丝滑，看起来挺专业。比较适合做产品展示、相册预览那类页面，提升质感还挺有用。

常规做法就是给图片加个.album-image类名，加上这段代码：

$(document).ready(function() {
  $('.album-image').mouseenter(function() {
    $(this).css('transform', 'scale(1.2)');
  }).mouseleave(function() {
    $(this).css('transform', 'scale(1.0)');
  });
});

如果你图片多，建议加上图片预加载，别等用户鼠标一过去图片还没加载出来，那就尴尬了。可以用$.getScript或提前加载图片资源。

另外，记得加上transition: all 0.3s ease，不然放大会有点生硬，看起来就没那么舒服。响应式布局方面也别忽略，小屏设备图片太大会炸版，缩放比例可以动态调一调。

整体来说，这是个挺实用的小功能，能给页面加点交互的味道。如果你正好在做相册、商城或展示类的页面，可以试试看。

rar 文件大小：288.05KB