这是很久以前写的一个效果了，之前虾米音乐网首页的一个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. ISO14443-4块传输的实现（卡)

    贴上自己的代码,目前测试通过,但我感觉结构不是很好,希望和大家交流共同提高. .H文件 #define ACKN -1 #define ACKY -2 #define RESEND -3 #defin ...

  2. Qt一步一步实现插件调用（附源码）

    最近手里几个项目都采用插件的方式进行开发工作,这里记录一下实现方法,给需要的同学一个参考, 在linux系统和window系统都能成功编译通过,不废话直接步骤 第一步:建立插件原型 新建一个Qt项目, ...

  3. 生产环境下，不建议用早期版本的Mono........

    一个BUG修复需要4年!!!!!!!!!!!!!也是醉了....不造被微软收购后的Xamarin会不会好起来

  4. BZOJ 1011 [HNOI2008]遥远的行星

    1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 2559  Solved ...

  5. （2015年郑州轻工业学院ACM校赛题） G 矩阵

    看这道题的时候就感觉用一点动归思想+暴力 就能过了. #include<stdio.h> #include<iostream> #include<stack> #i ...

  6. ASP.NET 之深入浅出Session和Cookie

    在做人事档案管理系统中,对于Session和Cookie的使用后理解更加深刻了,下面对本知识点总结学习. Session是什么? 简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有 ...

  7. aspx,ascx和ashx使用小结

    做asp.net开发的对.aspx,.ascx和.ashx都不会陌生.关于它们,网上有很多文章介绍.“纸上得来终觉浅,绝知此事要躬行”,下面自己总结一下做个笔记.1..aspxWeb窗体设计页面.We ...

  8. hyperv虚拟机网络速度慢问题的解决办法

    服务器安装了windows2012R2进行虚拟化,虚拟机也是用的是windows2012R2的操作系统,这样可以一次激活对应的虚拟机. 在使用虚拟机的过程中发现问题,虚拟机主机的网速正常,无论是ftp ...

  9. ZAB协议（转）

    转自:http://www.cnblogs.com/sunddenly/articles/4073157.html Zab协议   一.ZooKeeper概述 ZooKeeper内部有一个in-mem ...

  10. View inflate方法和LayoutInflater inflate方法的区别详解

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/6257510.html 我们在Android开发中,对于将布局填充成View对象,最常用的两种办法 ...