[JQuery实现带滑动层的图片展示效果.docxVIP

　下面是简单的制作过程：　　1、HTML 部分div?class=boxgrid caption????img?src=images/ad.gif/????div?class=cover boxcaption????????h3标题/h3????????p详细信息/p????/div/div　　2、CSS 部分.boxgrid{????width:?325px;????height:?260px;????margin:10px;????float:left;????background:#161613;????border:?solid?2px?#8399AF;????overflow:?hidden;????position:?relative;}.boxgrid?img{????position:?absolute;????top:?0;????left:?0;????border:?0;}.boxgrid?p{????padding:?0?10px;????color:#afafaf;????font-weight:bold;????font:10pt?Lucida Grande,?Arial,?sans-serif;}.boxcaption{????float:?left;????position:?absolute;????background:?#000;????height:?100px;????width:?100%;????opacity:?.8;????/* For IE 5-7 */????filter:?progid:DXImageTransform.Microsoft.Alpha(Opacity=80);????/* For IE 8 */????-MS-filter:?progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}.caption?.boxcaption?{????top:?220;????left:?0;}　　3、载入 JQuery　　用 JQuery 1.2 就完全足够了，小巧，推荐。　　4、JQuery 执行代码$(document).ready(function(){????????$(.boxgrid.caption).hover(function(){????????????????$(.cover,this).stop().animate({top:160px},{queue:false,duration:160});????????},?function()?{????????????????$(.cover,this).stop().animate({top:220px},{queue:false,duration:160});????????});});　　这里我只用了一种滑动效果，所以只需要以上这一段 JS 即可，更多滑动效果预览及参上面的链接是群上一位兄弟发的一个图片展示效果，并叹息道：jQuery什么时候才有这么cool的例子啊？我想说jQuery写这样的例子不难吧，于是就尝试着写一下.先看Html：div?id=photoShow????div?class=photo????????img?src=p1.jpg?/????????span张娜拉，韩国的/span????/div????div?class=photo????????img?src=p2.jpg?/????????spanMy Digital Story/span????/div????div?class=photo????????img?src=p3.jpg?/????????span不知道是什么图来的/span????/div????div?class=photo????????img?src=p4.jpg?/????????span我的Logo，Studio拼错了都不知道，汗一个。/span????/div????div?class=photo????????img?src=p5.jpg?/????????span四季图吧这是，但我分不清夏和秋/span????/div????/div/div然后我们写一个CSS来控制一下这个HTML的样式,CSS比较菜，将就吧，达到效果就好：#photoShow{??? border:?solid 1px #C5E88E;??? overflow:?hidden;?/*图片超出DIV的部分不显示*/??? width:?580px;??? height:?169px;??? background:?#C5E88E;??? position:?absolute;}.photo{??? position:?abs