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中on方法使用注意事项。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在网页设计中，我们常常要使用Javascript来改变页面元素的样式。2010-02-02
这篇文章主要介绍了jQuery插件echarts去掉垂直网格线用法,结合实例形式对比分析了jQuery图标插件echarts针对垂直网格线的相关设置操作技巧,需要的朋友可以参考下2017-03-03
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
JavaScript中设置元素的浮动属性（float），标准浏览器使用cssFloat，IE旧版本使用styleFloat。2011-09-09
这篇文章主要介绍了jQuery事件绑定和委托,以实例形式分析了jQuery事件绑定和委托中on()、bind()、live()、delegate()的用法,具有一定的学习与借鉴价值,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下2015-03-03
点击姓名会显示她的基本详细信息，点击切换皮肤，会更改皮肤和字体大小感兴趣的朋友可以参考下本文如何使用jQuery实现的网页版的个人简历2013-04-04
最近在做一个项目，需要一个在线视频播放的功能，在度娘上找了许多都不是太理想，就动手写了一个，分享给大家2014-10-10
这篇文章主要介绍了jQuery实用函数用法总结,汇总了jQuery常用的函数及相关技巧,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了jQuery实现消息弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最新评论