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

xxluo xxluo 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
下面这段代码是这样的效果:图片默认全为暗,移到一张上,这张变亮,其余的仍为暗。移开鼠标后,这张图片又变成暗。
如何把下面的代码变成这样的效果:
默认图片是鲜艳,鼠标移到一张上别的图片全变暗,被移到的图片还是亮的。鼠标移开后又全变成亮。
(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));
...全文

相关推荐

js 实现 鼠标放到图片上会显示另外一张图片

js 实现 鼠标放到图片上会显示另外一张图片!值得下载看看!资源免费,大家分享!!

YnSky

jQuery实现鼠标经过图片变亮其他变暗效果

在本例中,我们将探讨如何使用jQuery库来实现这个功能,即“鼠标经过图片变亮其他变暗”的效果。首先,我们需要理解jQuery的基本用法。

weixin_38663036

鼠标移动到一张图片时变为另一张图片

在本篇文档中,我们讨论的是如何利用JavaScript实现鼠标悬停在图片上时图片的动态更换效果。标题所提到的"鼠标移动到一张图片时变为另一张图片",是通过编程技术来实现实时交互的一种常见方法,通常用于

weixin_38601311

Snipaste使用技巧解析和常用快捷键大全

Snipaste是一款功能强大的免费截图工具,支持多平台使用。它不仅提供基础的截图功能,还具备智能区域识别、丰富标注工具、独特的贴图功能、颜色拾取等特色功能。文章详细介绍了Snipaste的安装方式、截图技巧、标注方法、贴图操作、颜色拾取功能以及保存导出技巧,并提供了完整的快捷键指南。此外,还分享了使用中的注意事项和优化技巧,如修改快捷键、与其他软件配合使用、处理权限问题等。Snipaste能显著提升工作学习效率,是程序员、设计师等专业人士的理想工具。

芥子沫

Qt自定义LED控件开发:从绘制到状态管理的完整实现

在桌面应用开发中,自定义控件是提升用户体验和界面专业性的关键技术。通过封装可复用的UI组件,开发者能够实现关注点分离,将绘制逻辑、状态管理与业务代码解耦。其核心原理在于继承基础控件类并重写绘制事件,利用属性系统和信号槽机制实现状态控制。这种组件化设计在工业控制、设备监控等场景中具有重要价值,能够直观显示设备状态、通信状态或报警级别。本文以LED指示灯控件为例,详细讲解了如何从零实现一个支持常亮、熄灭、闪烁等多种状态,且具备光泽效果与性能优化的Qt自定义控件,涵盖了绘制技巧、状态机设计以及生产环境下的缓存与高

cuankuangzhong6373
评论 6
收藏 已收藏
分享
返回顶部
xxluo
JavaScript 87,984 成员 224,681 内容