这是很久以前写的一个效果了，之前虾米音乐网首页的一个flash效果，最初觉得这flash效果也可以完全用jq来写，于是空余时间就写了下当作练习吧，现在就拿出来跟大家分享下其中的实现原理！

先上最终效果图：

特点：

1、鼠标经过动态创建元素

2、判断鼠标经过每行的最后二个改变方向

代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5. <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
  6. <style type="text/css">
  7. *{ margin:0; padding:0;}
  8. .list{  height:160px;width:960px;margin:50px auto; border:1px solid yellow;font-family:'Microsoft YaHei'}
  9. .list ul{ float:left; width:960px; background:#000; position:relative;}
  10. .list ul li{ float:left; width:80px; height:80px; margin:-1px; list-style:none; border:1px solid yellow; position:relative;}
  11. .list ul li img{ width:80px; height:80px; overflow:hidden; border:none; float:left;}
  12. .list ul li p{ position:absolute; width:100px; height:80px; background:yellow; left:80px; top:0; z-index:2;}
  13. .list ul li p b{ float:left; width:160px; height:30px; line-height:30px; font-size:14px;}
  14. .list ul li p span{ float:left; width:160px; height:50px; line-height:20px; overflow:hidden; font-size:12px;}
  15. .list ul li img.active{ border:3px solid yellow; width:74px; height:74px; position:absolute; left:0; top:0; z-index:2;}
  16. </style>
  17.  
  18. <script type="text/javascript">
  19.     $(function () {
  20.         $('.list li').hover(function () {
  21.         //鼠标移到li，其同辈元素半透明
  22.             $(this).siblings().css('opacity', 0.5);
  23.          //获取图片alt作为title
  24.             var alt = $(this).find('img').attr('alt');
  25.             //获取data作为简要描述
  26.             var data = $(this).find('img').attr('data');
  27.             //创建显示层
  28.             var p = '<p><b>' + alt + '</b><span>' + data + '</span></p>';
  29.             //li中插入创建层
  30.             $(this).append(p);
  31.             //鼠标经过添加默认样式
  32.             $(this).find('img').addClass('active').parent('a').parent('li').siblings().find('img').removeClass('active');
  33.             //鼠标移动到创建元素立即隐藏（这样做是为了被创建元素挡住可以点击）
  34.             $(this).children('p').hover(function () {
  35.                 $(this).hide();
  36.             });
  37.             //判断每行的最后二个改变方向
  38.             if ($(this).position().left > 720) {
  39.                 $(this).children('p').css({ 'left': -100, 'textAlign': 'right' });
  40.                 $(this).children('p').stop().animate({ 'width': 160, 'left': -160  }, 300);
  41.             } else {
  42.                 $(this).children('p').stop().animate({ 'width': 160}, 300);
  43.             }
  44.  
  45.         }, function () {
  46.             $(this).siblings().css('opacity', 1);//鼠标移开回复
  47.             $(this).children('p').remove();//鼠标移开移除创建元素
  48.             $(this).find('img').removeClass('active');
  49.         });
  50.  
  51.     });
  52.  
  53. </script>
  54. </head>
  55. <body>
  56. <div class="list">
  57.     <ul>
  58.         <li><a href="#"><img src="data:images/10.jpg" alt="图1" data="图1详细内容" /></a></li>
  59.         <li><a href="#"><img src="data:images/11.jpg" alt="图2" data="图2详细内容" /></a></li>
  60.         <li><a href="#"><img src="data:images/12.jpg" alt="图3" data="图3详细内容"/></a></li>
  61.         <li><a href="#"><img src="data:images/13.jpg" alt="图4" data="图4详细内容"/></a></li>
  62.         <li><a href="#"><img src="data:images/12.jpg" alt="图5" data="图5详细内容" /></a></li>
  63.         <li><a href="#"><img src="data:images/10.jpg" alt="图6" data="图6详细内容" /></a></li>
  64.         <li><a href="#"><img src="data:images/11.jpg" alt="图7" data="图7详细内容" /></a></li>
  65.         <li><a href="#"><img src="data:images/12.jpg" alt="图8" data="图8详细内容" /></a></li>
  66.         <li><a href="#"><img src="data:images/13.jpg" alt="图9" data="图9详细内容"/></a></li>
  67.         <li><a href="#"><img src="data:images/12.jpg" alt="图10" data="图10详细内容"/></a></li>
  68.         <li><a href="#"><img src="data:images/10.jpg" alt="图11" data="图11详细内容"/></a></li>
  69.         <li><a href="#"><img src="data:images/11.jpg" alt="图12" data="图12详细内容"/></a></li>
  70.         <li><a href="#"><img src="data:images/12.jpg" alt="图13" data="图13详细内容"/></a></li>
  71.         <li><a href="#"><img src="data:images/13.jpg" alt="图14" data="图14详细内容"/></a></li>
  72.         <li><a href="#"><img src="data:images/12.jpg" alt="图15" data="图15详细内容"/></a></li>
  73.         <li><a href="#"><img src="data:images/10.jpg" alt="图16" data="图16详细内容"/></a></li>
  74.         <li><a href="#"><img src="data:images/11.jpg" alt="图17" data="图17详细内容"/></a></li>
  75.         <li><a href="#"><img src="data:images/12.jpg" alt="图18" data="图18详细内容"/></a></li>
  76.         <li><a href="#"><img src="data:images/13.jpg" alt="图19" data="图19详细内容"/></a></li>
  77.         <li><a href="#"><img src="data:images/12.jpg" alt="图20" data="图20详细内容"/></a></li>
  78.         <li><a href="#"><img src="data:images/10.jpg" alt="图21" data="图21详细内容"/></a></li>
  79.         <li><a href="#"><img src="data:images/11.jpg" alt="图22" data="图22详细内容"/></a></li>
  80.         <li><a href="#"><img src="data:images/13.jpg" alt="图23" data="图23详细内容"/></a></li>
  81.         <li><a href="#"><img src="data:images/12.jpg" alt="图24" data="图24详细内容"/></a></li>
  82.     </ul>
  83. </div>
  84. </body>
  85. </html>

完毕，不妨copy下来看看下代码！

jq仿虾米网flash效果的更多相关文章

  1. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  2. 卡拉OK歌词原理和实现高仿Android网易云音乐

    大家好,我们是爱学啊,继上一篇讲解了[LRC歌词原理和实现高仿Android网易云音乐],今天给大家带来一篇关于卡拉OK歌词原理和在Android上如何实现歌词逐字滚动的效果,本文来自[Android ...

  3. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  6. Android PopupWindow 仿微信弹出效果

    项目中,我须要PopupWindow的时候特别多,这个东西也特别的好使,所以我今天给大家写一款PopupWindow 仿微信弹出效果.这样大家直接拿到项目里就能够用了! 首先让我们先看效果: 那么我首 ...

  7. 仿建设银行APP首页效果

    仿建设银行APP首页效果 下载地址: http://pan.baidu.com/s/1eRMYEzC 下载后需要解压,解压密码联系:390980233  收费88元 HTML+JS实现,下载即可试用. ...

  8. 网站flash效果遭360急速浏览器拦截

    网站flash效果遭遇360急速浏览器拦截,经分析,本地的一个css文件叫做advertisement.css  结果被360急速浏览器给毙了.改成其他名字就ok了.

  9. 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. UNDO 100%

    另外查了下v$undostat,发现begin_time已经很久没有改变, BEGIN_TIME           END_TIME             MAXQUERYLEN MAXCONCU ...

  2. （转载）php反射类 ReflectionClass

    (转载)http://hi.baidu.com/daihui98/item/a67dfb8213055dd75f0ec165   php反射类 ReflectionClass 什么是php反射类,可以 ...

  3. C# .NET开发Oracle数据库应用程序

    .NET Framework访问Oracle数据库至少有两种方式,一种是利用微软提供的ADO.NET,另一种是利用Oracle提供的ODP.NET. 安装VS的时候会附带ADO.NET,安装Oracl ...

  4. Clone Graph——LeetCode

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  5. cf590A Median Smoothing

    A. Median Smoothing time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. 「Githug」Git 游戏通关流程

    Githug 他喵的这是个啥!?难道不是 GitHub 拼错了么,和 Git 什么关系? 和游戏又有什么关系? 其实,他的元身在这里:https://github.com/Gazler/githug  ...

  7. Windows 如何在cmd命令行中查看、修改、删除与添加环境变量

    转自:http://www.cnblogs.com/saptechnique/archive/2013/02/17/2914222.html 首先明确一点: 所有的在cmd命令行下对环境变量的修改只对 ...

  8. 生成 JSON 数据

    //build an info object and convert to json NSDictionary* info = [NSDictionary dictionaryWithObjectsA ...

  9. python django model类型摘要

    V=models.CharField(max_length=None[, **options]) #varchar V=models.EmailField([max_length=75, **opti ...

  10. [转] 用source命令执行脚本和用sh执行脚本之间的区别

    from: http://blog.csdn.net/david_xtd/article/details/8012627 问题: 有很多方式可以执行脚本, 1).source test.bsh 2). ...