这是很久以前写的一个效果了，之前虾米音乐网首页的一个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. GCC警告提示错误“cc1:all warnings being treated as errors”

    http://blog.csdn.net/zhangjs0322/article/details/25131787

  2. Documentation/sched-bwc.txt 的中文翻译

    Chinese translated version of Documentation/sched-bwc.txt If you have any comment or update to the c ...

  3. treap启发式合并

    注意输入v要在建根的前面. #include <cstdio> #include <iostream> #include <algorithm> #include ...

  4. 【转】Android 带checkbox的listView 实现多选，全选，反选 -- 不错

    原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...

  5. 怎么都没人提 google 加密搜索呢? google如何稳定打开

    1. 使用smarthosts提供的hosts文件 https://smarthosts.googlecode.com/svn/trunk/hosts2. 修改浏览器默认搜索引擎为 https://e ...

  6. JDK 高性能编程之容器

    高性能编程在对不同场景下对于容器的选择有着非常苛刻的条件,这里记录下前人总结的经验,并对源码进行调试 JDK高性能编程之容器 读书笔记内容部分来源书籍深入理解JVM.互联网等 先放一个类图util,点 ...

  7. oracle的shutdown命令有几种参数

    SHUTDOWN NORMAL:不允许新的连接.等待会话结束.等待事务结束.做一个检查点并关闭数据文件.启动时不需要实例恢复.SHUTDOWN TRANSACTIONAL:不允许新的连接.不等待会话结 ...

  8. 手机端H5点击类目自动定位到相应内容

    _obj = {}; /*点击弹出分类*/_obj.openZZ=function(){ document.getElementById("app_screen01").style ...

  9. qt之treeview例子

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.Qt import * from PyQt4. ...

  10. Bloom Filter概念和原理

    Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合.Bloom Filter的这种高效是有一定代价的:在判断一个元素是否属于某 ...