在鼠标光标下显示图像

时间：2015-03-27 10:51:56

标签： jquery html css image adobe

我正在尝试创建鼠标悬停效果，以显示初始图像下方的图像。当用户将鼠标移动到图像上时，必须显示下面的图像，并且一旦用户将鼠标移过显示的图像，显示的图像就需要保持显示，所以最后，如果用户将鼠标全部传递到初始图像上，只显示下面的图像。我正在使用Adobe Muse。是否有小部件或其他东西可以做到这一点？

1 个答案:

答案 0 :(得分：-1)

试试这个：

HTML

<body>   
        <canvas id="back"></canvas>
        <canvas id="front" onmousemove="futo(event);"></canvas>
</body>

CSS

#back{
     position: fixed;
     width: 400px;
     height: 300px;
     z-index: -1;
}
#front{
     position: fixed;
     width: 400px;
     height: 300px;
     z-index: 1;
}

的Javascript

window.onload = function(){ 

    var h = new Image();
    h.src = 'image url';
    var back = document.getElementById('back');
    back.width = 400;
    back.height = 300;
    back.getContext('2d').drawImage(h,0,0,back.width,back.height); 
    var front = document.getElementById('front');
    front.width = 400;
    front.height = 300;
    var ctx = front.getContext('2d');
    var f = new Image();
    f.src= 'image url';
    ctx.drawImage(f,0,0,front.width,front.height); 
};

function futo(event){

    //alert("here");
    event = event || window.event; // IE-ism
    var posX = event.clientX;
    var posY = event.clientY; 
    posX = posX - 10;
    posY = posY - 10;
    var pos = "X: " + posX + " Y: " + posY;
        var back = document.getElementById('back');
    var front = document.getElementById('front');
    var backimage = back.getContext('2d').getImageData(0,0,back.width,back.height);
    var frontimage = front.getContext('2d').getImageData(0,0,front.width,front.height);
    var index = (posY * 4 * front.width) + (posX * 4);
    for(var i = 0; i < 30; i++){
        for(var j = 0; j < 30; j++){
            frontimage.data[index] = backimage.data[index];
            frontimage.data[index+1] = backimage.data[index+1];
            frontimage.data[index+2] = backimage.data[index+2];
            frontimage.data[index+3] = backimage.data[index+3];
            index = index + 4;
        }
        index = index + (4 * front.width) - 120;
    }
    front.getContext('2d').putImageData(frontimage,0,0);
}