jQuery实现鼠标经过图片变亮其他变暗效果


Posted in Javascript onMay 08, 2015

以下是完整源代码:

<!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.3water.com/js/2014/jquery-images-blba/

特效下载:https://3water.com/jiaoben/264211.html

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
JavaScript基于setTimeout实现计数的方法
May 08 #Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 #Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 #Javascript
jquery实现图片左右切换的方法
May 07 #Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 #Javascript
jQuery团购倒计时特效实现方法
May 07 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
你真的了解Python的random模块吗?
2017/12/12 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
详解Python中第三方库Faker
2020/09/25 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
家教广告词
2014/03/19 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
公务员个人年终总结
2015/02/12 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
公司内部升职自荐信
2015/03/27 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
员工工作心得体会
2019/05/07 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书