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 ...
随机推荐
- 在Visual C++下搭建OpenGL的开发环境
1.确保你的电脑已经安装了visual c++编译器 如果还没安装的话,这里有个安装包,可以复制链接进行下载:http://pan.baidu.com/s/1bn4XTqn 2.下载GLUT 下载 ...
- 石阶 VS 石像
山庙有尊雕刻精美的佛像,前来拜佛的人络绎不绝. 铺在山路上的石阶开始抱怨:“大家同是石头,凭什么我被人蹬来踩去,你却被人供在殿堂?” 佛像笑了笑:“当年你只挨六刀,做了一方石阶,而我经历了千刀万凿之后 ...
- Kafka安装与实验
接上面一篇文章: http://www.cnblogs.com/charlesblc/p/6038112.html 主要参考这篇文章: http://www.open-open.com/lib/vie ...
- laravel Event执行顺序
laravel一大特色就是event事件系统.一般首先要listen一个事件,随后fire那个事件,这时执行路径将会调用event handler,返回后继续执行.例如: Event::listen( ...
- laravel中的命名公约规范及relation N+1问题
User: model ; users: 表名: user_id 键值 relation: public function tasks(){return $this->belongsToMa ...
- R语言处理大规模数据集的编程要点
1.提高程序效率,保证执行速度 (1)尽量使用向量化运算 (2)尽量使用矩阵,必要时才使用数据框 (3)使用read.table时,尽量显式设定colClasses和nrows,设定comment.c ...
- 如何扩展VCL的hint
默认的Hint窗口展现如下: 这种情况下可以操作有窗口的背景颜色,字体样式 Application.Color 有的时候仅仅是文字满足不了我们的需求,比例如下格式: 这个时候就应该执行以下步骤: 1. ...
- HDU (线段树 单点更新) I Hate It
和上一道题没什么变化,只不过把单点增减变成了单点替换,把区间求和变成了区间求最大值. #include <cstdio> #include <algorithm> using ...
- 四、Emmet：快速编写HTML,CSS代码的有力工具
介绍 Emmet是一个插件,在IDE中安装该插件后即可使用该功能. HTML代码写起来虽简单,但是重复代码很多,Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法),比如 div.c ...
- 介绍 Android 的 Camera 框架
总体介绍 Android Camera 框架从整体上看是一个 client/service 的架构,有两个进程:一个是 client 进 程,可以看成是 AP 端,主要包括 JAVA 代码与一些 na ...