先放效果图：

百度云下载地址：http://pan.baidu.com/s/1dDpn1Sl

代码如下：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery hover鼠标滑过图片背景高亮闪烁</title>

<!--<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

-->

<script src="js/jquery.1.4.2-min.js"></script>

</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;text-decoration:none;}

body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";}

/* box */

.box{width:480px;height:460px;overflow:hidden;margin:20px auto 0 auto;}

.box li{float:left;width:155px;margin:0 4px 7px 0;display:inline;}

.box li a{position:relative;height:104px;display:block;overflow:hidden;cursor:pointer;}

.box li a .title{z-index:2;position:absolute;bottom:10px;left:-160px;width:150px;height:20px;padding:0 0 0 10px;line-height:20px;color:#000;font-size:20px;}

.box li a .shine{z-index:3;position:absolute;top:0;left:0;width:160px;height:104px;background:url(images/shine_brands.png) no-repeat -160px 0;}

</style>

<div class="box">

    <ul>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine">&nbsp;</span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

         <li><a href=""><img src="data:images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li>

    </ul>

</div><!--box end-->

<script type="text/javascript">

$(document).ready(function(){

    $(".box li a").hover(function(){

        var shine = $(this).find(".shine");

        var title = $(this).find(".title");

        shine.stop().css("backgroundPosition","-160px 0");

        shine.animate({backgroundPosition: '160px 0'},500);

        title.stop().animate({left:'0px'},{queue:false,duration:450});

    },

    function(){

        $(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200});

    });

});

</script>

</body>

</html>

jQuery hover demo的更多相关文章

  1. JQuery hover(over,out) 使用笔记

    转载自:http://www.douban.com/note/202404884/ JQuery hover(over,out) 使用笔记 JavaScript 下.onmouseover() 和 o ...

  2. JQuery AJAX Demo

    JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...

  3. JQuery hover toggle事件使用

    JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...

  4. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  5. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  6. jquery mobile demo

    <!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <me ...

  7. JQuery编程demo练习

    JQuery练习demo:     编敲代码,实现:     1.选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色). 2.取消选中复选框时,所在行的背景色恢复. ============ ...

  8. jQuery hover 延时器实现代码

    例如: 复制代码代码如下: $('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒.  ho ...

  9. jquery选择器demo

    大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. hdu - 1180 诡异的楼梯 (bfs+优先队列)

    http://acm.hdu.edu.cn/showproblem.php?pid=1180 注意点就是楼梯是在harry移动完之后才会改变方向,那么只要统计到达这个点时间奇偶性,就可以知道当前楼梯是 ...

  2. platform设备驱动全透析

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://21cnbao.blog.51cto.com/109393/337609 1.1 ...

  3. Oracle EBS 寄售业务总结

    总述: 须通过一揽子采购协议(BPA)明确采购方与供应商之间的寄售关系,及各种协议条款: 通过来源补充规则(Sourcing Rules)明确物料的供应商以及分配规则: 通过合格供应商列表(ASL)明 ...

  4. 【转】Android横竖屏切换问题

    Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...

  5. 【笨嘴拙舌WINDOWS】SetCapture和ReleaseCapture

    光电鼠标器是通过红外线或激光检测鼠标器的位移,将位移信号转换为电脉冲信号,再通过程序的处理和转换来控制屏幕上的光标箭头的移动的一种硬件设备. 换句话说,鼠标无时无刻不在监视着人类的活动,当人类用意识去 ...

  6. UVa 1593 (水题 STL) Alignment of Code

    话说STL的I/O流用的还真不多,就着这道题熟练一下. 用了两个新函数: cout << std::setw(width[j]);    这个是设置输出宽度的,但是默认是在右侧补充空格 所 ...

  7. 51nod1556 计算

    ans[n]=ans[n-1]*3-m[n-2];YY一下可以懂的.减掉的就是往下走的情况不符合正整数的情况.m是默慈金数. #include<cstdio> #include<cs ...

  8. Codeforces 279 B Books

    题意:给出n本书,总的时间t,每本书的阅读时间a[i],必须按照顺序来阅读,问最多能够阅读多少本书 有点像紫书的第七章讲的那个滑动区间貌似 维护一个区间的消耗的时间小于等于t,然后维护一个区间的最大值 ...

  9. 作业调度框架 Quartz.NET 2.0 StepByStep

    注:目前网上诸多介绍Quartz.net的文章,甚至Quartz.net官网上的Tutorial都是1.0版本的,而这个项目在2.0版本对项目进行了比较大规模的修改,使得原有的很多例子都不能运行,故写 ...

  10. 了解Objective-C中NSAutoreleasePool使用方法

    本文的目的是来了解Objective-C中NSAutoreleasePool使用方法,Objective-C的Foundation库实际上是种运行级对象系统,与一般的对象语言,例如C++,Java不一 ...