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 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
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
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
使用Apache的rewrite
2021/03/09 Servers
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
react路由配置方式详解
2017/08/07 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
shell程序中如何注释
2012/01/28 面试题
小学教师暑期培训心得体会
2016/01/09 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python