如何实现，默认图片是鲜艳，鼠标移到一张上别的图片全变暗，被移到的图片还是亮的

<img src="DSC_0019.jpg"  border=0 style="filter:alpha(opacity=20);width:200px;height:200px;"
onmouseout="this.filters.alpha.opacity=20"
onmouseover="this.filters.alpha.opacity=100;" />
这个只有IE管用
http://demo.niutuku.com/js/20/11/可参考这个修改下这个兼容IE和FF
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
$.fn.extend({
BlackAndWhite: function(options) {
'use strict';
var $container = this,
defaults = {
hoverEffect: true,
webworkerPath: false,
responsive: false,
invertHoverEffect: false,
speed: 500,
onImageReady: null,
intensity: 1
};
options = $.extend(defaults, options);/**
*
* Public vars
*
*/
var hoverEffect = options.hoverEffect,
webworkerPath = options.webworkerPath,
invertHoverEffect = options.invertHoverEffect,
responsive = options.responsive,
intensity = (typeof options.intensity === 'number' && options.intensity < 1 && options.intensity > 0) ? options.intensity : 1,
fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed,
fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed;var isIE7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;/*
*
* features detection
*
*/var browserPrefixes = ' -webkit- -moz- -o- -ms- '.split(' ');var cssPrefixString = {};
var cssPrefix = function(property) {
if (cssPrefixString[property] || cssPrefixString[property] === '') return cssPrefixString[property] + property;
var e = document.createElement('div');
var prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various supports...
for (var i in prefixes) {
if (typeof e.style[prefixes[i] + property] !== 'undefined') {
cssPrefixString[property] = prefixes[i];
return prefixes[i] + property;
}
}
return property.toLowerCase();
};
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css-filters.js
var cssfilters = function() {
var el = document.createElement('div');
el.style.cssText = browserPrefixes.join('filter' + ':blur(2px); ');
return !!el.style.length && ((document.documentMode === undefined || document.documentMode > 9));
}();
/**
*
* Private vars
*
*/
var supportsCanvas = !! document.createElement('canvas').getContext,
$window = $(window),
/* Check if Web Workers are supported */
supportWebworker = (function() {
return (typeof(Worker) !== "undefined") ? true : false;
}()),
cssFilter = cssPrefix('Filter'),
imagesArray = [],
BnWWorker = supportWebworker && webworkerPath ? new Worker(webworkerPath + "BnWWorker.js") : false;/**
*
* Private methods
*
*/
var _onMouseLeave = function(e) {
$(e.currentTarget).find('.BWfade').stop(true, true)[!invertHoverEffect ? 'fadeIn' : 'fadeOut'](fadeSpeedOut);
};
var _onMouseEnter = function(e) {
$(e.currentTarget).find('.BWfade').stop(true, true)[invertHoverEffect ? 'fadeIn' : 'fadeOut'](fadeSpeedIn);
};
var _onImageReady = function(img) {
if (typeof options.onImageReady === 'function')
options.onImageReady(img);
};
// Loop all the images converting them by the webworker (this process is unobstrusive and it does not block the page loading)
var _webWorkerLoop = function() {
if (!imagesArray.length) {
// terminate the worker
// the standard way - http://www.w3.org/TR/workers/#dedicated-workers-and-the-worker-interface
if (BnWWorker.terminate)
BnWWorker.terminate();
// IE 10 specific - http://msdn.microsoft.com/en-us/library/ie/hh673568(v=vs.85).aspx
if (BnWWorker.close)
BnWWorker.close();
return;
}BnWWorker.postMessage({
imgData:imagesArray[0].imageData,
intensity: intensity
});BnWWorker.onmessage = function(event) {
imagesArray[0].ctx.putImageData(event.data, 0, 0);
_onImageReady(imagesArray[0].img);
imagesArray.splice(0, 1);
_webWorkerLoop();
};
};
//convert any image into B&W using HTML5 canvas
var _manipulateImage = function(img, canvas, width, height) {
var ctx = canvas.getContext('2d'),
currImg = img,
i = 0,
grey;ctx.drawImage(img, 0, 0, width, height);var imageData = ctx.getImageData(0, 0, width, height),
px = imageData.data,
length = px.length;// web worker superfast implementation
if (BnWWorker) {imagesArray.push({
imageData: imageData,
ctx: ctx,
img: img
});} else {// no webworker slow implementation
for (; i < length; i += 4) {
var k = px[i] * 0.3 + px[i + 1] * 0.59 + px[i + 2] * 0.11;
px[i] = ~~ (k * intensity + px[i] * (1 - intensity));
px[i + 1] = ~~ (k * intensity + px[i + 1] * (1 - intensity));
px[i + 2] = ~~ (k * intensity + px[i + 2] * (1 - intensity));
}ctx.putImageData(imageData, 0, 0);_onImageReady(img);
}
};var _injectTags = function($img, $imageWrapper) {var pic = $img[0],
src = pic.src,
width = $img.width(),
height = $img.height(),
css = {
'position': 'absolute',
top: 0,
left: 0,
display: invertHoverEffect ? 'none' : 'block'
};
if (supportsCanvas && !cssfilters) {var realWidth = pic.width,
realHeight = pic.height;//adding the canvas
$('<canvas class="BWfade" width="' + realWidth + '" height="' + realHeight + '"></canvas>').prependTo($imageWrapper);
//getting the canvas
var $canvas = $imageWrapper.find('canvas');
//setting the canvas position on the Pics
$canvas.css(css);_manipulateImage(pic, $canvas[0], realWidth, realHeight);} else {css[cssPrefix('Filter')] = 'grayscale(' + intensity * 100 + '%)';
//adding the canvas
$('<img src=' + src + ' width="' + width + '" height="' + height + '" class="BWFilter BWfade" /> ').prependTo($imageWrapper);
$('.BWFilter').css($.extend(css, {
'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'
}));_onImageReady(pic);
}
};
this.init = function(options) {
// convert all the images
$container.each(function(index, tmpImageWrapper) {
var $imageWrapper = $(tmpImageWrapper),
$pic = $imageWrapper.find('img');if (!$pic.width())
$pic.on("load", function() {
_injectTags($pic, $imageWrapper);
});
else
_injectTags($pic, $imageWrapper);
});
// start the webworker
if (BnWWorker) {
// web worker implementation
_webWorkerLoop();
}
// binding the hover effect
if (hoverEffect) {$container.on('mouseleave', _onMouseLeave);
$container.on('mouseenter', _onMouseEnter);
}
// make it responsive
if (responsive) {
$window.on('resize orientationchange', $container.resizeImages);
}
};this.resizeImages = function() {$container.each(function(index, currImageWrapper) {
var pic = $(currImageWrapper).find('img:not(.BWFilter)'),
currWidth = isIE7 ? $(pic).prop('width') : $(pic).width(),
currHeight = isIE7 ? $(pic).prop('height') : $(pic).height();$(this).find('.BWFilter, canvas').css({
width: currWidth,
height: currHeight
});});
};return this.init(options);}});
}(jQuery));
$(function(){
$("li").BlackAndWhite({
hoverEffect : true,
webworkerPath : false,
responsive:true,
invertHoverEffect: false,
intensity:1,
speed: {
fadeIn: 200,
fadeOut: 800
},
         });
$(".BWFilter").css("display","none");
$("ul").bind("mouseleave",function(){
$(".BWFilter").css("display","none");
bindOver();
});
bindOver();
});
function bindOver(){
$("ul").bind("mouseover",function(e){
$(".BWFilter").css("display","block");
var li;
if(e.target.tagName == "IMG"){
li = $(e.target).closest("li");
} else {
li = $(e.target);
}
li.find(".BWFilter").css("display","none");
$("ul").unbind("mouseover");
});
}
</script>
<style>
ul,li{
margin:0;
padding:0;
}
li{
position:relative;
list-style:none;
}
ul{
display:inline-block;
}
</style>
</head>
<body>
<ul>
<li><img src="aaaa.jpg" width=50 height=50 /></li>
<li><img src="aaaa.jpg" width=50 height=50 /></li>
<li><img src="aaaa.jpg" width=50 height=50 /></li>
<li><img src="aaaa.jpg" width=50 height=50 /></li>
</ul>
</body>
</html>

调试易

如何实现，默认图片是鲜艳，鼠标移到一张上别的图片全变暗，被移到的图片还是亮的

解决方案 »