如何实现,默认图片是鲜艳,鼠标移到一张上别的图片全变暗,被移到的图片还是亮的
如何把下面的代码变成这样的效果:
默认图片是鲜艳,鼠标移到一张上别的图片全变暗,被移到的图片还是亮的。鼠标移开后又全变成亮。
(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 实现 鼠标放到图片上会显示另外一张图片!值得下载看看!资源免费,大家分享!!
jQuery实现鼠标经过图片变亮其他变暗效果
在本例中,我们将探讨如何使用jQuery库来实现这个功能,即“鼠标经过图片变亮其他变暗”的效果。首先,我们需要理解jQuery的基本用法。
鼠标移动到一张图片时变为另一张图片
在本篇文档中,我们讨论的是如何利用JavaScript实现鼠标悬停在图片上时图片的动态更换效果。标题所提到的"鼠标移动到一张图片时变为另一张图片",是通过编程技术来实现实时交互的一种常见方法,通常用于
Snipaste使用技巧解析和常用快捷键大全
Snipaste是一款功能强大的免费截图工具,支持多平台使用。它不仅提供基础的截图功能,还具备智能区域识别、丰富标注工具、独特的贴图功能、颜色拾取等特色功能。文章详细介绍了Snipaste的安装方式、截图技巧、标注方法、贴图操作、颜色拾取功能以及保存导出技巧,并提供了完整的快捷键指南。此外,还分享了使用中的注意事项和优化技巧,如修改快捷键、与其他软件配合使用、处理权限问题等。Snipaste能显著提升工作学习效率,是程序员、设计师等专业人士的理想工具。
Qt自定义LED控件开发:从绘制到状态管理的完整实现
在桌面应用开发中,自定义控件是提升用户体验和界面专业性的关键技术。通过封装可复用的UI组件,开发者能够实现关注点分离,将绘制逻辑、状态管理与业务代码解耦。其核心原理在于继承基础控件类并重写绘制事件,利用属性系统和信号槽机制实现状态控制。这种组件化设计在工业控制、设备监控等场景中具有重要价值,能够直观显示设备状态、通信状态或报警级别。本文以LED指示灯控件为例,详细讲解了如何从零实现一个支持常亮、熄灭、闪烁等多种状态,且具备光泽效果与性能优化的Qt自定义控件,涵盖了绘制技巧、状态机设计以及生产环境下的缓存与高


