| |
|
|
| | Хочу сделать эффект при наведении мыши на картинку, а при отводе, что бы возвращалась все в первоначальный вид.
С Jquery я вообще не силен, помогите доработать.
HTML:
<p><a href=""><img src="image1.jpg" border="0" class="image" alt="" /></a></p>
|
CSS:
.image {
padding: 4px;
border: 1px solid #BBB;
background-color: #EEE;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 6px 10px #AAA;
-moz-box-shadow: 2px 6px 10px #AAA;
-webkit-box-shadow: 2px 6px 10px #AAA;
}
|
JQUERY:
<script type="text/javascript">
$(document).ready(function(){
var supportCanvas = 'getContext' in document.createElement('canvas');
var wh = {width:0,height:0};
if(supportCanvas){
$(".image").hover(function() {
$(this).hide();
if(!wh.width){
wh.width = this.width;
wh.height = this.height;
}
var imN = createCanvasOverlay(this);
imN.addClass('image');
}, function() {
$(imN).hide();
$(this).show();
});
}
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'),
canvasContext = canvas.getContext("2d");
canvas.width = wh.width;
canvas.height = wh.height;
canvasContext.drawImage(image,0,0);
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;
for(var i = 0,z=data.length;i<z;i++){
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
++i;
}
canvasContext.putImageData(imageData,0,0);
image.parentNode.insertBefore(canvas,image);
}
});
</script>
|
1 Сейчас получается, что отображается картинка, для нее срабатывает класс image.
2 При наведении на эту картинку исчезает старый вариант и отображается новая картинка (с нужным эффектом) но класс image к ней не добавлен.
3 Как только отводим мышку, все остается по-прежнему. (как в строке 2)
Помогите растолковать, что да как надо..
Заранее благодарен! | |
| |
|
