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 相关文章推荐
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
react中使用swiper的具体方法
2018/05/15 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
Python命名空间详解
2014/08/18 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
党校自我鉴定范文
2013/10/02 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Python编程编写完善的命令行工具
2021/09/15 Python