jQuery炫酷特效之上下滑动的图片(网页图片悬停效果代码)

上下滑动的图片效果在很多网站中经常可见，默契情况下，网页整齐的显示在一行，无任何文字介绍。当鼠标悬停想图片上时，图片缓慢上滑，显示图片的描述性介绍，当鼠标离开时，图片下滑恢复原来的显示样式。

初始效果

鼠标悬停效果

当鼠标悬停在中间的图片上时，图片上滑冰显示文字提示内容。想要实现这样的效果吗？跟我一起动起手来码代码吧。

一、HTML结构

HTML结构

二、CSS

holder类是单一图片的容器类，holder容器内包含图片、标题和图片描述，其overflow:hidden;，这样当图片或文字内容溢出容器大小时，使其隐藏而不会造成混乱。

三、jQuery代码

其实就时通过给holder样式所在的容器添加hover鼠标悬停事件。

怎么样，通过几行简单的代码，不仅让网站变得具有创意，而且使得网站不至于因为图文混排而带来凌乱的感觉。

以上内容为【jQuery炫酷特效之上下滑动的图片(网页图片悬停效果代码)】的相关内容。

本文内容来自用户上传并发布或网络新闻客户端自媒体，本站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请联系删除。