jQuery实现鼠标经过图片变亮其他变暗效果
更新时间：2015年05月08日 09:37:23 投稿：hebedich
jQuery实现的仿商城图片变亮变暗效果，鼠标悬停图片之后该图片变亮，其他图片变暗。移开鼠标所有图片变亮，兼容主流浏览器，适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，有需要的小伙伴可以参考下。
以下是完整源代码：
<!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实现鼠标经过图片变亮效果</title><base target="_blank" />
<style type="text/css">
a {color:white;}
body{background:#000;}
body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
.hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}
.hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hovertreebox li').mouseover(function (e) {
$(this).siblings().stop().fadeTo(500,0.4);
});
$('.hover'+'treebox li').mouseout(function (e) {
$(this).siblings().stop().fadeTo(500,1);
});
})
</script>
</head>
<body>
<div style="color:white">jQuery突出图片列表中鼠标经过项
<br /></div>
<div class="hovertreebox" id="hovertreelist">
<ul>
<li><img src="/images/01.jpg" width="200" height="186" /></li>
<li><img src="/images/02.jpg" width="200" height="186" /></li>
<li><img src="/images/03.jpg" width="200" height="186" /></li>
<li><img src="/images/04.jpg" width="200" height="186" /></li>
<li><img src="/images/05.jpg" width="200" height="186" /></li>
<li><img src="/images/06.jpg" width="200" height="186" /></li>
</ul>
</div>
</body>
</html>
演示地址：http://demo.jb51.net/js/2014/jquery-images-blba/
特效下载：https://www.jb51.net/jiaoben/264211.html
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
- jQuery实现鼠标滑过图片移动特效
- jQuery实现鼠标滚动图片延迟加载效果附源码下载
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
- jQuery实现的鼠标滑过弹出放大图片特效
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
- 基于jquery实现鼠标滚轮驱动的图片切换效果
- jquery实现鼠标滑过后动态图片提示效果实例
- JQuery实现鼠标移动图片显示描述层的方法
- Jquery实现鼠标移动放大图片功能实例
- jQuery实现的感应鼠标悬停图片色彩渐显效果
- jQuery实现鼠标滑过预览图片大图效果的方法
相关文章
在最近做的一个项目中，使用jQuery Validation验证日期，遇到的问题和一个没有预料到的情况是，在ASP.NET MVC 3的项目中，对于 input type="date" data-val="true"的元素，如果调用form的valid方法验证form，虽然我没有添加日期验证的设置2012-02-02
这篇文章主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了javascript的变量、传值、传址、参数之间关系的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了jquery easyUI中ajax异步校验用户名，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了jQuery事件绑定和委托,以实例形式分析了jQuery事件绑定和委托中on()、bind()、live()、delegate()的用法,具有一定的学习与借鉴价值,需要的朋友可以参考下2014-11-11
下面小编就为大家带来一篇各种选择框jQuery的选中方法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了jQuery源码解读之removeAttr()方法分析,较为详细的分析了removeAttr方法的实现技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
jquery中封装了一些ajax请求的方法，很实用,本文将以此引入一个实例，对jquery中ajax请求的方法进行详细介绍，需要了解更多的朋友可以参考下2012-11-11
jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。那么作为一个前端设计师，怎么可能不来深入了解下jQuery呢，首先我们从他的总体构架开始吧2014-06-06
jQuery为我们提供了方便的事件注册机制，它的优点，操作简单，且不用担心事件覆盖等问题。缺点，普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法2022-07-07
最新评论