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 ...
随机推荐
- hbase 学习笔记二----shell
Hbase 是一个分布式的.面向列的开源数据库,其实现是建立在google 的bigTable 理论之上,并基于hadoop HDFS文件系统. Hbase不同于一般的关系型数据库 ...
- Toast.makeText().show() 正常使用但不显示的解决办法
症状: toast正常构造,调用show时,不显示. View tabMeItem = tabHost.findViewById(R.id.tab_me_xc); tabMeItem.setOnCli ...
- 【POJ】3398 Perfect Service
1. 题目描述某树形网络由$n, n \in [1, 10^4]$台计算机组成.现从中选择一些计算机作为服务器,使得每当普通计算机恰好与一台服务器连接(并且不超过一台).求需要指定服务器的最少数量 2 ...
- HibernateTools的使用
1. 到 Hibernate.org官网上 下载最新版的 Hibernate Tools,我用的是 HibernateTools-3.2.4.GA版 2. 将 下载下来的压缩包解压缩,里面会有 plu ...
- hibernate annotation配置经验
1.将annotation写在entity类文件的get方法上面
- CSS visibility与display 属性
所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...
- UVa 11100 The Trip, 2007
今天的教训:做题要用大块的时间来做,上午做一下,做题做到一半就去忙别的事,那么后面再做的时候就无限CE,WA了.因为你很难或者需要很长时间来找回当时的思路. 题意:就像套瓷娃娃一样,有n个包,大小可能 ...
- HDU 2553 (状压) N皇后问题 (2)
也许大多数做法都是打表,但这里用位运算的思想来解决这个问题,位运算果然强大,Orz 原文地址,感觉讲的很明白了: http://www.cnblogs.com/gj-Acit/archive/2013 ...
- mysql大数据导出导入
1)导出 select * from users into outfile '/tmp/users.txt';或 select * from users where sex=1 into outfil ...
- PHP学习笔记02——简易计算器
<!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...