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 相关文章推荐
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
vue 限制input只能输入正数的操作
Aug 05 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
模拟xcopy的函数
2006/10/09 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
python如何使用代码运行助手
2020/07/03 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
高一学生期末评语
2014/04/25 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
公司食堂管理制度
2015/08/05 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫