这是很久以前写的一个效果了，之前虾米音乐网首页的一个flash效果，最初觉得这flash效果也可以完全用jq来写，于是空余时间就写了下当作练习吧，现在就拿出来跟大家分享下其中的实现原理！
先上最终效果图：
特点：
1、鼠标经过动态创建元素
2、判断鼠标经过每行的最后二个改变方向
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0; padding:0;} .list{ height:160px;width:960px;margin:50px auto; border:1px solid yellow;font-family:‘Microsoft YaHei‘} .list ul{ float:left; width:960px; background:#000; position:relative;} .list ul li{ float:left; width:80px; height:80px; margin:-1px; list-style:none; border:1px solid yellow; position:relative;} .list ul li img{ width:80px; height:80px; overflow:hidden; border:none; float:left;} .list ul li p{ position:absolute; width:100px; height:80px; background:yellow; left:80px; top:0; z-index:2;} .list ul li p b{ float:left; width:160px; height:30px; line-height:30px; font-size:14px;} .list ul li p span{ float:left; width:160px; height:50px; line-height:20px; overflow:hidden; font-size:12px;} .list ul li img.active{ border:3px solid yellow; width:74px; height:74px; position:absolute; left:0; top:0; z-index:2;} </style> <script type="text/javascript"> $(function () { $(‘.list li‘).hover(function () { //鼠标移到li，其同辈元素半透明 $(this).siblings().css(‘opacity‘, 0.5); //获取图片alt作为title var alt = $(this).find(‘img‘).attr(‘alt‘); //获取data作为简要描述 var data = $(this).find(‘img‘).attr(‘data‘); //创建显示层 var p = ‘<p><b>‘ + alt + ‘</b><span>‘ + data + ‘</span></p>‘; //li中插入创建层 $(this).append(p); //鼠标经过添加默认样式 $(this).find(‘img‘).addClass(‘active‘).parent(‘a‘).parent(‘li‘).siblings().find(‘img‘).removeClass(‘active‘); //鼠标移动到创建元素立即隐藏（这样做是为了被创建元素挡住可以点击） $(this).children(‘p‘).hover(function () { $(this).hide(); }); //判断每行的最后二个改变方向 if ($(this).position().left > 720) { $(this).children(‘p‘).css({ ‘left‘: -100, ‘textAlign‘: ‘right‘ }); $(this).children(‘p‘).stop().animate({ ‘width‘: 160, ‘left‘: -160 }, 300); } else { $(this).children(‘p‘).stop().animate({ ‘width‘: 160}, 300); } }, function () { $(this).siblings().css(‘opacity‘, 1);//鼠标移开回复 $(this).children(‘p‘).remove();//鼠标移开移除创建元素 $(this).find(‘img‘).removeClass(‘active‘); }); }); </script> </head> <body> <div class="list"> <ul> <li><a href="#"><img src="images/10.jpg" alt="图1" data="图1详细内容" /></a></li> <li><a href="#"><img src="images/11.jpg" alt="图2" data="图2详细内容" /></a></li> <li><a href="#"><img src="images/12.jpg" alt="图3" data="图3详细内容"/></a></li> <li><a href="#"><img src="images/13.jpg" alt="图4" data="图4详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图5" data="图5详细内容" /></a></li> <li><a href="#"><img src="images/10.jpg" alt="图6" data="图6详细内容" /></a></li> <li><a href="#"><img src="images/11.jpg" alt="图7" data="图7详细内容" /></a></li> <li><a href="#"><img src="images/12.jpg" alt="图8" data="图8详细内容" /></a></li> <li><a href="#"><img src="images/13.jpg" alt="图9" data="图9详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图10" data="图10详细内容"/></a></li> <li><a href="#"><img src="images/10.jpg" alt="图11" data="图11详细内容"/></a></li> <li><a href="#"><img src="images/11.jpg" alt="图12" data="图12详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图13" data="图13详细内容"/></a></li> <li><a href="#"><img src="images/13.jpg" alt="图14" data="图14详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图15" data="图15详细内容"/></a></li> <li><a href="#"><img src="images/10.jpg" alt="图16" data="图16详细内容"/></a></li> <li><a href="#"><img src="images/11.jpg" alt="图17" data="图17详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图18" data="图18详细内容"/></a></li> <li><a href="#"><img src="images/13.jpg" alt="图19" data="图19详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图20" data="图20详细内容"/></a></li> <li><a href="#"><img src="images/10.jpg" alt="图21" data="图21详细内容"/></a></li> <li><a href="#"><img src="images/11.jpg" alt="图22" data="图22详细内容"/></a></li> <li><a href="#"><img src="images/13.jpg" alt="图23" data="图23详细内容"/></a></li> <li><a href="#"><img src="images/12.jpg" alt="图24" data="图24详细内容"/></a></li> </ul> </div> </body> </html>
完毕，不妨copy下来看看下代码！
原文：http://www.cnblogs.com/sweet201314/p/3597270.html