xxluo 2014年01月17日
如何实现,默认图片是鲜艳,鼠标移到一张上别的图片全变暗,被移到的图片还是亮的
下面这段代码是这样的效果:图片默认全为暗,移到一张上,这张变亮,其余的仍为暗。移开鼠标后,这张图片又变成暗。
如何把下面的代码变成这样的效果:
默认图片是鲜艳,鼠标移到一张上别的图片全变暗,被移到的图片还是亮的。鼠标移开后又全变成亮。
(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));
...全文
101 点赞 收藏 6
写回复
6 条回复

还没有回复,快来抢沙发~

发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告