本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)
本文作者: 苏洋
创建时间: 2012年11月29日
统计字数: 2030字
阅读时间: 5分钟阅读
本文链接: https://soulteary.com/2012/11/29/jquery-diary-opacity.html
-----
# jQuery 笔记：突出焦点(透明度)
高手莫入，浅显例子而已。最近在更换项目中的javascript库，觉得如果能把实践的过程记录下来，应该可以帮助到一些对javascript感兴趣的前端初学者。
或许有的时候，你需要在一堆一样的图片或者图标中突显某一个元素。
有一个不错的方案，就是将你要凸显的内容的透明度降低，而其他的元素的透明度调高。
完整例子: http://thecdn.sinaapp.com/page/demo/jq-obj-opacity/
页面结构可以是下面的样子，对你想要突出显示的内容带上相同的class属性。
比如：obj-opacity
```html
JQUERY OBJECT OPACITY
这个小图需要点击来触发,原因看代码.
```
接着把你的元素简单的展示组合一下
```css
*,html,body,div,ul,li{
margin: 0;
padding: 0;
}
html,body,div,ul,li{
display: block;
float: left;
}
body{
background-color: #EEE;
}
div#warp{
width: 260px;
height: 180px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -90px;
background-color: #DDD;
position: absolute;
}
div#warp div#logo{
background: url(logo.png) 0 0 no-repeat;
width: 64px;
height: 64px;
margin: 30px;
opacity:.9;
}
div#warp ul#img-list{
clear: left;
}
ul#img-list li.obj-opacity{
background: url(small.png) 0 0 no-repeat;
width: 32px;
height: 32px;
margin: 10px;
cursor: pointer;
}
div#single-pic img.single{
position: absolute;
top: 20px;
left: 130px;
}
div#single-pic p{
position: absolute;
font: 9px/1.25 sans-serif;
color: #999;
display: block;
width: 90px;
left: 160px;
top: 12px;
}
/*初始化的透明度*/
.obj-opacity{
opacity: .1;
}
```
接着就是jQuery插件的源代码: 因为有上一篇文章的铺垫，这篇就可以简单的注释了吧。
```js
/* SOULTEARY.COM
_____ ____ __ ____ _______________ ______ __
/ ___// __ \/ / / / / /_ __/ ____/ | / __ \ \/ /
\__ \/ / / / / / / / / / / __/ / /| | / /_/ /\ /
___/ / /_/ / /_/ / /___/ / / /___/ ___ |/ _, _/ / /
/____/\____/\____/_____/_/ /_____/_/ |_/_/ |_| /_/ */
;(function($){
$.fn.extend({
"objOpacity": function(params){
params = $.extend({
warp:'#warp', //查找元素的限定容器
target:'.obj-opacity', //目标元素具备的类名
hover:'effect', //具备焦点后添加类名
event:'mouseover', //触发焦点的事件
bevent:'mouseout', //失去焦点的事件[唯一时触发]
focus:1, //获得焦点后的透明度
blur:.1, //失去焦点后的透明度
speed:600 //动画速度(单位ms)
},params);
$(document).ready(function(){
var target = $(params.target);
var count = target.length;
if (!count) {return;}
var warp = $(params.warp);
var o = 0;
var tarClass = params.target.replace('.','');
warp.bind(params.event, function(e){
var cur = e.target;
if (!$(cur).hasClass(tarClass)) {return;}
target.removeClass(params.hover);
$(cur).addClass(params.hover);
for(var i=0;i