jQuery图片列表上下滚动显示图片详细内容-20130630
[html5]
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}/* caselist */.caselist{width:474px;margin:30px auto;}.caselist li{width:227px;height:227px;float:left;margin:0 10px 15px 0;position:relative;overflow:hidden;}.tagImg1{width:226px;height:226px;display:block; position:absolute; left:0px; top:0px;}.tagImg1 img{width:226px;height:226px;}.tagImg2{width:59px;height:59px;display:block;float:left;margin:0 10px 0 0;}.tagImg2 img{width:59px;height:59px;}.tagDiv1{background:#F4F4F4;border:1px solid #E7E7E7;padding:10px;width:205px;height:205px;position:absolute;left:0px;top:226px;z-index:2;}.tagDiv1 h3{margin:0px;font-size:12px;color:#000;line-height:16px;}.tagP1{margin:5px 0 0;color:#666;}.tagP2{line-height:22px;clear:both;color:#666;padding:5px 0 0;height:115px;overflow:hidden;}.tagP3{height:25px;}.tagP3 a{background:url("images/jz_sprite-btn.png") no-repeat;color:#2A5077;display:inline-block;height:25px;line-height:25px;margin-left:10px;text-align:center;width:89px;text-decoration:none;}</style><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){var moveHeight = 226, //控制当鼠标移动到图片上原图片消失的速度moveTime = 200,//控制当鼠标触及到图片的时候图片向上和下滚动的速度curMove = null;//将定义curMove参数为空$('.caselist li').hover(function (e){//将所有存放图片的li都设定入一个伪类var curLi = $(this);//将curLi参数定义为获得thiscurMove = setTimeout(function (){curLi.children('div.tagDiv1').animate({ top: '0px' }, moveTime);}, 200);//改变鼠标触及后的图片的高度 正好于上面的上滚动的时间符合 修改高度来让后面的图片显示出来},function(e){clearTimeout(curMove);//将curMove方法放进去$(this).children('div.tagDiv1').animate({ top: moveHeight + 'px' }, moveTime);//当鼠标移开图片以后 让原来的图片显示出来 就是改变第二张图片的高度 后让第一张图片显示出来});});</script><ul target="_blank"><img src="images/bzImg001.jpg" alt="jQuery图片列表左右滚动显示图片详细内容-20130630" /></a><div target="_blank"><img src="images/bzImg001.jpg" alt="jQuery图片列表左右滚动显示图片详细内容-20130630" /></a><h3>全聚德</h3><p target="_blank">查看该产品</a><a href="http://www.17sucai.com" target="_blank">查看案例</a></p></div></li><li><a target="_blank" href="http://www.17sucai.com"><img alt="jQuery图片列表左右滚动显示图片详细内容-20130630" src="images/bzImg004.jpg"></a><div href="http://www.17sucai.com"><img alt="jQuery图片列表左右滚动显示图片详细内容-20130630" src="images/bzImg004.jpg"></a><h3>佳思特</h3><p href="http://www.17sucai.com">查看该产品</a><a target="_blank" href="http://www.17sucai.com">查看案例</a></p></div></li><li><a target="_blank" href="http://www.17sucai.com"><img alt="jQuery图片列表左右滚动显示图片详细内容-20130630" src="images/bzImg004.jpg"></a><div href="http://www.17sucai.com"><img alt="jQuery图片列表左右滚动显示图片详细内容-20130630" src="images/bzImg004.jpg"></a><h3>佳思特</h3><p href="http://www.17sucai.com">查看该产品</a><a target="_blank" href="http://www.17sucai.com">查看案例</a></p></div></li><li><a href="http://www.17sucai.com" target="_blank"><img src="images/bzImg001.jpg" alt="jQuery图片列表左右滚动显示图片详细内容-20130630" /></a><div target="_blank"><img src="images/bzImg001.jpg" alt="jQuery图片列表左右滚动显示图片详细内容-20130630" /></a><h3>全聚德</h3><p target="_blank">查看该产品</a><a href="http://www.17sucai.com" target="_blank">查看案例</a></p></div></li></ul><!--caselist end--></body></html>