jQuery hover demo
先放效果图：
百度云下载地址：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"> </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的更多相关文章
- JQuery hover(over,out) 使用笔记
转载自:http://www.douban.com/note/202404884/ JQuery hover(over,out) 使用笔记 JavaScript 下.onmouseover() 和 o ...
- JQuery AJAX Demo
JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...
- JQuery hover toggle事件使用
JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- jquery mobile demo
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <me ...
- JQuery编程demo练习
JQuery练习demo: 编敲代码,实现: 1.选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色). 2.取消选中复选框时,所在行的背景色恢复. ============ ...
- jQuery hover 延时器实现代码
例如: 复制代码代码如下: $('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒. ho ...
- jquery选择器demo
大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- C# const与static的理解
C# const与static的理解 static readonly与 const变量,作用是一样的,无论访问修饰符是不是public,还是其它(private. protected.interna ...
- c 建立工程 常见错误及心得总结
1. 调用函数里面的 调用子函数,要是出现已定义错误,则要看看,是不是主函数的 头文件写成.c啦,因为在.h里面也定义可一次,要是写.c出现两次 错误提示:UrlCheck.obj : error L ...
- 【转载】Javascript中的this关键字
看了这篇文章 http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html 分情况讨论. 情况一:纯粹的函数 ...
- 函数lock_rec_create
/*********************************************************************//** Creates a new record lock ...
- C#分页类
using System.Linq; using System.Collections.Generic; namespace CommonLibrary { public class PagedLis ...
- git cheatsheet小抄本
https://www.kernel.org/pub/software/scm/git/docs/git.html
- Qt之显示网络图片
简述 Qt中包含了网络模块-network,我们可以很容易的进行各种网络编程和数据传输,关于network的类很多,其中包含:支持DNS.HTTP.TCP/UDP等众多高级类,可以参考助手. 下面我们 ...
- UVa 1607 (二分) Gates
这道题真的有点“神”啊.=￣ω￣= 因为输入都是x,所以整个电路的功能一共就四种:0, 1, x,!x 所以就确定了这样一个事实:如果电路的输出是常数,那么所有的输入都可以优化成常数. 否则,只需要将 ...
- link cut tree 入门
鉴于最近写bzoj还有51nod都出现写不动的现象,决定学习一波厉害的算法/数据结构. link cut tree:研究popoqqq那个神ppt. bzoj1036:维护access操作就可以了. ...
- Asp.Net使用代理IP远程获取数据
/// <summary> /// 远程获取数据 /// </summary> /// <param name="url">url</pa ...