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

xxluo 2014-01-17 10:31:41
下面这段代码是这样的效果：图片默认全为暗，移到一张上，这张变亮，其余的仍为暗。移开鼠标后，这张图片又变成暗。
如何把下面的代码变成这样的效果：
默认图片是鲜艳，鼠标移到一张上别的图片全变暗，被移到的图片还是亮的。鼠标移开后又全变成亮。
(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));
...全文
229 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
allali 2014-01-17
  • 打赏
  • 举报
 回复
<!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>
xxluo 2014-01-17
  • 打赏
  • 举报
 回复
引用 1 楼 snmr_com 的回复:
这个去javascript版问吧 我看把false和true交换一下大概可以吧
我要是的 如何把下面的代码变成这样的效果： 默认图片是鲜艳，鼠标移到一张上别的图片全变暗，被移到的图片还是亮的。鼠标移开后又全变成亮。 怎么交换？
xxluo 2014-01-17
  • 打赏
  • 举报
 回复
我说的是 鼠标移到一张上别的图片全变暗，被移到的图片还是亮的
xxluo 2014-01-17
  • 打赏
  • 举报
 回复
如何把下面的代码变成这样的效果： 默认图片是鲜艳，鼠标移到一张上别的图片全变暗，被移到的图片还是亮的。鼠标移开后又全变成亮。
蝶恋花雨 2014-01-17
  • 打赏
  • 举报
 回复 
<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
ImN1 2014-01-17
  • 打赏
  • 举报
 回复
这个去javascript版问吧 我看把false和true交换一下大概可以吧
144项大神级ppt制作技术
其实办法还是有的，先安置好两幅图片的位置，选中它们，将之组合起来，成为"一张图片"。接下来将之动画效果设置为"左右向中间收缩"，现在请看一看，是不是两幅图片同时动作了？ 2. 滚动文本框的制作 右击工具栏...
【Python】 Python 自动化办公 — `pyautogui` 图像定位与点击功能深度剖析
是一个功能强大且易于上手的 Python 库，它允许您通过编写脚本来控制鼠标和键盘，从而实现图形用户界面（GUI）的自动化。与其他一些需要深入了解特定应用程序API或复杂UI结构的自动化工具不同， 的一个核心优势在于...
手把手教你用CSS实现一个VR 3D游戏菜单栏效果，前端开发框架
[外链图片转存中…(img-pPnMADnN-1712365229239)][外链图片转存中…(img-eA8LSibI-1712365229240)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发...
100项PPT制作技术，做出让观众倾倒的演示文档！
1. 两幅图片同时动作 ...PowerPoint的动画效果比较多，但图片只能一幅一幅地动作。...其实办法还是有的，先安置好两幅图片的位置，选中它们，将之组合起来，成为"一张图片"。接下来将之动画效果设置
【PPT】常用技巧操作
其实办法还是有的，先安置好两幅图片的位置，选中它们，将之组合起来，成为"一张图片"。接下来将之动画效果设置为"左右向中间收缩"，现在请看一看，是不是两幅图片同时动作了？ 2. 滚动文本框的制作 右击工具栏...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章