这是很久以前写的一个效果了，之前虾米音乐网首页的一个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. 324篇CSS应用效果集合（梦想天空，可同时应用于Web开发与Qt界面开发）

    http://www.cnblogs.com/lhb25/category/146075.html http://www.yyyweb.com/

  2. POJ2242 The Circumference of the Circle（几何）

    题目链接. 题目大意: 给定三个点,即一个任意三角形,求外接圆的周长. 分析: 外接圆的半径可以通过公式求得(2*r = a/sinA = b/sinB = c/sinC),然后直接求周长. 注意: ...

  3. BZOJ1533: [POI2005]Lot-A Journey to Mars

    1533: [POI2005]Lot-A Journey to Mars Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 174  Solved: 76[S ...

  4. at命令

    在windows系统中,windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划, 它的功能就是安排自动运行的任务. 通过'添加任务计划'的一步步引导,则可建立一 ...

  5. Introduction to Web Services

    What are Web Services? Web Services are client and server applications that communicate over the Wor ...

  6. openStack 云平台使用一般杂记

    1. To launch an instance,you must at least specify the flavor,image name,network,security group,keyp ...

  7. 高性能JSON工具-FastJson处理超大JSON文本

    使用阿里开源类库FastJson,当需要处理超大JSON文本时,需要Stream API,在fastjson-1.1.32版本中开始提供Stream API.文档参考GitHub:https://gi ...

  8. (转)Maven实战（三）Eclipse构建Maven项目

    1. 安装m2eclipse插件    要用Eclipse构建Maven项目,我们需要先安装meeclipse插件    点击eclipse菜单栏Help->Eclipse Marketplac ...

  9. Ubuntu14.04下安装ns2.35

    我选择的版本是2.35最新版本,安装环境是Ubuntu 14.04. 1.下载ns2的安装包,这里我选择的是ns-allinone-2.35.tar.gz压缩格式的all in one安装包,all ...

  10. 静态变量符 static

    1.private是访问权限限定,static表示不要实例化就可以使用. (1)被static修饰的变量,叫静态变量或类变量,没有被static修饰的变量,叫实例变量. 对于静态变量在内存中只有一个拷 ...