[JQuery代码]超酷鼠标滑过背景高亮效果
1、效果及功能说明
鼠标滑过悬停特效，div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示，产品标题滑动显示或隐藏
2、实现原理
首先定义好一个重复实现效果的方法，然后定义光带出现速度和从什么位置出现，在定义当鼠标触及到图片后标题出什么位置出现到什么为位置停止，中间要花多少时间，最后在定义当鼠标离开图片后标题缩回去到那里和用的时间
主要的方法
$(this).find(".shine").css("background-position","-160px 0");
//定义重复的动画效果
$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);
//定义光带的动画效果和用时
$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});
//鼠标触及后的标图出现的到那里停止和用时
$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200})
//鼠标离开后标题的回缩到哪里和用时3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><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, "新宋体";}
/* brands-list */
.brands-list{width:480px;height:460px;overflow:hidden;margin:20px auto 0 auto;}
.brands-list li{float:left;width:155px;margin:0 4px 7px 0;display:inline;}
.brands-list li a{position:relative;height:104px;display:block;overflow:hidden;cursor:pointer;}
.brands-list li a .title{z-index:2;position:absolute;bottom:10px;left:-160px;width:150px;height:20px;padding:0 0 0 10px;color:#f1e8eb;line-height:17px;background:url(images/img_caption_bg.png) no-repeat;}
.brands-list 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;}.brands-list li a .title{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/img_caption_bg.png');}
.brands-list li a .shine{_background:none;}
</style><div class="brands-list"><ul><li><a href="http://www.17sucai.com/"><img src="data:images/01.jpg" alt="Prada"/><span class="title">Prada</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/02.jpg" alt="Dolce&Gabbana"/><span class="title">Dolce&Gabbana</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/03.jpg" alt="Etro"/><span class="title">Etro</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/04.jpg" alt="Fendi"/><span class="title">Fendi</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/05.jpg" alt="Michael Kors"/><span class="title">Michael Kors</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/06.jpg" alt="Neil Barrett"/><span class="title">Neil Barrett</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/07.jpg" alt="Moncler"/><span class="title">Moncler</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/09.jpg" alt="Parosh"/><span class="title">Parosh</span><span class="shine"> </span></a></li><li><a href="http://www.17sucai.com/"><img src="data:images/04.jpg" alt="Fendi"/><span class="title">Fendi</span><span class="shine"> </span></a></li></ul>
</div><!--brands-list end--><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//定义个可以激活所有函数的方法
$(".brands-list li a").hover(function(){//定义一个鼠标触及到图片上的伪类方法
$(this).find(".shine").stop();//定义一个遍历来停止当前所有的动画的方法
$(this).find(".shine").css("background-position","-160px 0");//定义一个遍历来定义，标题和光带重复出现-160px开始出现
$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);//定义一个遍历来定义，一条光带出现扫过鼠标触及的图片光带动画为0.5秒
$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});
//定义一个遍历获得停止当前动画方法后在定义一个动画让标题最后停在距左0的位置标题单独动画的时间
},function(){$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200});//定义一个遍历获得停止当前动画方法后在定义一个动画标题回到 -160的地方就是不见了标题回收的动画及时间
});
});
</script>
</body>
</html>转载于:https://www.cnblogs.com/ranran/p/jquery_mouse_over_bg.html
[JQuery代码]超酷鼠标滑过背景高亮效果相关推荐
- 仿照google主页面布局html代码,超酷仿GOOGLE首页导航菜单效果
超酷仿GOOGLE首页导航菜单效果 window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,1806 ...
- jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！）...
昨天才写了一个方法,今天发现一个更简单的. html: <!DOCTYPE html> <html> <head lang="en"><m ...
- C# ListView控件显示表格（自适应宽度），添加 Checkbox，删除选择项，选中颜色和鼠标滑过背景变色
本文转载自:http://www.liangshunet.com/ca/201309/586362553.htm 亮术网 2020-03-07 本网原创 DataGridView控件功能十分强大,显示 ...
- php插入html动态背景,HTML5超酷响应式视频背景动画特效
简要教程 这是一款HTML5超酷响应式视频背景动画特效.该视频背景可以将视频自适应屏幕的大小,制作出炫酷的动态视频背景效果. 使用方法 在页面中引入bideo.js文件. HTML结构 该视频背景动画 ...
- Jquery实现超酷的时间轴特效
原文:Jquery实现超酷的时间轴特效 源代码下载地址:http://www.zuidaima.com/share/1607123657378816.htm
- html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果
这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果.当用户用鼠标滑过按钮的时候,一道流光会瞬间滑过按钮,就像玻璃的反光效果,非常漂亮. 使用方法 HTML结构 该效果中的按钮是一个超链接元素. Li ...
- java全景图片生成_[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果...
[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果 0 2015-07-23 18:00:14 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们 ...
- CSS鼠标滑过div上移效果
CSS鼠标滑过div上移效果 css鼠标滑过div向上移动效果 主要用到c3的transform属性 该属性允许我们对元素进行旋转 缩放 倾斜或移动 1.效果展示 2.html代码 <body& ...
- 纯css hover实现效果,纯CSS鼠标hover实现背景扇动效果
纯CSS鼠标hover实现背景扇动效果 .la-btn { padding:14px 20px; background:#1abc9c; color:#fff; font-size:14px; ove ...
最新文章
- linux 关机 司机,Linux 关机
- Linux Kernel TCP/IP Stack — 网卡监控
- WebService 之 WSDL文件 讲解
- 浅谈PHP面向对象编程（九）
- 配置nginx直接使用webpack生成的gz压缩文件
- 《需求工程——软件建模与分析》阅读笔记之一
- UE4中多种颜色轮廓线的后期处理
- java锁机制ppt_总结：Java锁机制
- CodeForces 103D Time to Raid Cowavans 分块+dp
- swift 关于闭包和函数
- 6月7日 bc总结
- HTTP服务基础 、 网页内容访问 、 安全Web服务 、 部署动态网站
- Amesim学习——传热基础案例：烧红铁棒在空气中冷却
- 目标检测应用竞赛 | 天池铝型材表面瑕疵（含数据集、详细解决方案）
- 程序员怎样锻炼批判性思维
- 中国家庭追踪调查（CFPS）数据及问卷（2010-2018年）
- ubuntu18.04双系统卸载并重装
- MyBioSource丨人Hif1αelisa试剂盒解决方案
- 【RHCE】NFS服务器简介及简单共享目录配置
- DOTA~杀人声音，英雄台词