jquery实现鼠标滑过后动态图片提示效果实例

本文实例讲述了jquery实现鼠标滑过后动态图片提示效果。分享给大家供大家参考。具体如下：

这里jquery实现的鼠标悬停图片提示效果，把鼠标放在图片上的时候，图片向右上角滑动并缩小，同时提示显示出来，类似幻灯片一样的效果，推荐给大家学习借鉴。

运行效果截图如下：

具体代码如下：

！DOCTYPE htmlheadtitlejQuery图片动态信息显示幻灯效果/title样式。画廊容器{宽度： 1024 px}.图库图像{底色：黑色；宽度宽度：325px高度：260 px飞越：隐藏；余量：5pxfloat:left}。信息{左边距：10 pxfont-family : arialpadding:3px }。信息h2 { color:gray}。信息p { color:white} .clear { clear : both margin-top :10 px；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).画廊图片').悬停(function(){ $(this)).查找(' img ').动画({width:100，页边距到p 336010，marginLeft:10}，500)；}，function(){ $(this).查找(' img ').动画({width:325，marginTop:0，marginLeft:0}，300)；});});/script meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/head dydiv class=' gallery container '！-图库条目-div class='图库图像' img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810102423303。jpg '/img div class=' info ' H2美国农场/h2 p美国农场的大自然美景/p /div /div！-end gallery entry-！-图库条目-div class='图库图像' img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810102436957。jpg '/img div class=' info ' H2日落黄昏/h2 p美丽的日落，拍摄于2009年10月16日，印度尼西亚/p /div /div！-end gallery entry-！-图库条目-div class='图库图像' img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810102445216。jpg '/img div class=' info ' H2欧洲乡野/h2 p沉浸在大自然的寂静里田纳西州，2006年/p /div /div！-end gallery条目-/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。