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 ...
随机推荐
- 【HDOJ】1362 The Bermuda Triangle
1. 题目描述给定几个三角形拼成一个百慕大三角形. 2. 基本思路基本思路肯定是搜索,关键点是剪枝.(1) 若存在长度为$l$的边,则一定可以拼成长度为$k \cdot l$的三角形,则可拼成长度为$ ...
- 【POJ】3398 Perfect Service
1. 题目描述某树形网络由$n, n \in [1, 10^4]$台计算机组成.现从中选择一些计算机作为服务器,使得每当普通计算机恰好与一台服务器连接(并且不超过一台).求需要指定服务器的最少数量 2 ...
- 阿里云yum源
wget -O /etc/yum.repos.d/CentOS-Base-aliyun.repo http://mirrors.aliyun.com/repo/Centos-6.repo 参考:htt ...
- ASP.NET26 个常用性能优化方法
数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源. ASP.NET中提供了连接池(Co ...
- gitflow workflow
https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow Dream big, work smart, ...
- 如何扩展VCL的hint
默认的Hint窗口展现如下: 这种情况下可以操作有窗口的背景颜色,字体样式 Application.Color 有的时候仅仅是文字满足不了我们的需求,比例如下格式: 这个时候就应该执行以下步骤: 1. ...
- js之json
关于json不了解的,请点击:http://www.json.org/json-zh.html json对象的属性必须要用双引号,值为字符串类型也只能使用双引号,例:{"name" ...
- eclipse中字母大小写转换快捷键
ctrl+shift+x 转为大写 ctrl+shift+y 转为小写
- SQL group by分组查询（转）
本文导读:在实际SQL应用中,经常需要进行分组聚合,即将查询对象按一定条件分组,然后对每一个组进行聚合分析.创建分组是通过GROUP BY子句实现的.与WHERE子句不同,GROUP BY子句用于归纳 ...
- GUI for git|SourceTree|入门基础
原文链接:http://www.jianshu.com/p/be9f0484af9d 目录 SourceTree简介 SourceTree基本使用 SourceTree&Git部分名词解释 相 ...