这是很久以前写的一个效果了，之前虾米音乐网首页的一个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="data:images/10.jpg" alt="图1" data="图1详细内容" /></a></li>

        <li><a href="#"><img src="data:images/11.jpg" alt="图2" data="图2详细内容" /></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图3" data="图3详细内容"/></a></li>

        <li><a href="#"><img src="data:images/13.jpg" alt="图4" data="图4详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图5" data="图5详细内容" /></a></li>

        <li><a href="#"><img src="data:images/10.jpg" alt="图6" data="图6详细内容" /></a></li>

        <li><a href="#"><img src="data:images/11.jpg" alt="图7" data="图7详细内容" /></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图8" data="图8详细内容" /></a></li>

        <li><a href="#"><img src="data:images/13.jpg" alt="图9" data="图9详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图10" data="图10详细内容"/></a></li>

        <li><a href="#"><img src="data:images/10.jpg" alt="图11" data="图11详细内容"/></a></li>

        <li><a href="#"><img src="data:images/11.jpg" alt="图12" data="图12详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图13" data="图13详细内容"/></a></li>

        <li><a href="#"><img src="data:images/13.jpg" alt="图14" data="图14详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图15" data="图15详细内容"/></a></li>

        <li><a href="#"><img src="data:images/10.jpg" alt="图16" data="图16详细内容"/></a></li>

        <li><a href="#"><img src="data:images/11.jpg" alt="图17" data="图17详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图18" data="图18详细内容"/></a></li>

        <li><a href="#"><img src="data:images/13.jpg" alt="图19" data="图19详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图20" data="图20详细内容"/></a></li>

        <li><a href="#"><img src="data:images/10.jpg" alt="图21" data="图21详细内容"/></a></li>

        <li><a href="#"><img src="data:images/11.jpg" alt="图22" data="图22详细内容"/></a></li>

        <li><a href="#"><img src="data:images/13.jpg" alt="图23" data="图23详细内容"/></a></li>

        <li><a href="#"><img src="data:images/12.jpg" alt="图24" data="图24详细内容"/></a></li>

    </ul>

</div>

</body>

</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. QT的的字体使用（全局自带字体特别好用）

    WIN10下的默认字体居然是Segoe UI,造成各Windows版本显示不一致,可以这样修改Windows的默认字体(重启后生效): [HKEY_LOCAL_MACHINE>>SOFTW ...

  2. Visual Studio如何删除多余的空行

    原文:Visual Studio如何删除多余的空行 如何在Visual  Studio中删除多余的空格: 适用于:Visual Studio2008 &2010 1.       Ctrl + ...

  3. 启动Activity但不显示其界面

    最近在工作中做了一个很简单的任务,制作一个apk,点击该app链接到某一个网站.     代码很简单,只有如寥寥几行: (browser.java) package com.test.browser; ...

  4. SQL Server中的STUFF函数的使用

    STUFF ( character_expression , start , length ,character_expression ) 作用 删除指定长度的字符,并在指定的起点处插入另一组字符. ...

  5. 安装SQL SERVER2005时，需要win7下安装IIS，记录下

    安装SQL server2005 时,需要先安装IIS,这里描述win7系统下配置IIS的方法. 虽然很多文章都有写过,这里只是重复一下 关键是IIS组件全都勾选上,如果没有全部勾选上,IIS组件没有 ...

  6. Android中bitmap的相关处理

    加载大图片 Options options=new Options(); options.inJustDecodeBounds=true;//不加载图片,只加载文件信息 //加载图片,获取到配置信息 ...

  7. Android新浪微博客户端（七）——ListView中的图片异步加载、缓存

    原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...

  8. AOJ 0558 广度优先搜索

    题意:在 H * W 的地图里有 N 个工厂,每个工厂分别生产硬度为1-N 的奶酪,有一只老鼠准备把所有奶酪都吃完.老鼠的初始体力值为1,每吃一个奶酪体力值加 1.已知老鼠不能吃硬度大于当前体力值的奶 ...

  9. java中字符串的比较

    compareTo方法是比较两个字符串的词典顺序  也就是在字典中的顺序,比如“abcd”在“acdb”前面 大于返回1,小于返回-1 equals:比较两字符串的内容是否相同. 相同返回1,不同返回 ...

  10. QFII

    QFII(Qualified Foreign Institutional Investors)合格的境外机构投资者的英文简称,中文“酋匪”,QFII机制是指外国专业投资机构到境内投资的资格认定制度. ...