Jquery 在鼠标光标下显示图像_Jquery_Html_Css_Image_Adobe

Jquery 在鼠标光标下显示图像

jquery html css image adobe

Jquery 在鼠标光标下显示图像,jquery,html,css,image,adobe,Jquery,Html,Css,Image,Adobe,我正在尝试创建一个鼠标悬停效果，可以在初始图像下面显示一个图像。当用户将鼠标移到图像上时，必须显示下面的图像，并且一旦用户将鼠标移到图像上，显示的图像需要保持显示状态，因此最终，如果用户将鼠标移到初始图像上，则仅显示下面的图像。我正在使用Adobe Muse。是否有一个小部件或其他东西可以做到这一点试试这个： HTML Javascript window.onload=function（）{ var h=新图像（）； h、 src='图像url'； var back=document.getE

我正在尝试创建一个鼠标悬停效果，可以在初始图像下面显示一个图像。当用户将鼠标移到图像上时，必须显示下面的图像，并且一旦用户将鼠标移到图像上，显示的图像需要保持显示状态，因此最终，如果用户将鼠标移到初始图像上，则仅显示下面的图像。我正在使用Adobe Muse。是否有一个小部件或其他东西可以做到这一点

试试这个：

HTML Javascript

window.onload=function（）{
var h=新图像（）；
h、 src='图像url'；
var back=document.getElementById（'back'）；
背宽=400；
背高=300；
back.getContext（'2d'）.drawImage（h，0,0，back.width，back.height）；
var front=document.getElementById（'front'）；
正面宽度=400；
正面高度=300；
var ctx=front.getContext（'2d'）；
var f=新图像（）；
f、 src='图像url'；
ctx.drawImage（f，0,0，前.宽，前.高）；
};
功能futo（活动）{
//警报（“此处”）；
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指数=（posY*4*front.width）+（posX*4）；
对于（变量i=0；i<30；i++）{
对于（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]；
指数=指数+4；
}
索引=索引+（4*前部宽度）-120；
}
getContext（'2d'）.putImageData（frontimage，0,0）；
}

请提供一些代码。。到目前为止你都做了些什么？请展示你的努力，并用你尝试的解决方案发布一些代码给我们看一个链接你真的读过OP的要求吗？“…他显示的图像需要在用户将鼠标移到其上时保持显示…”它仍然没有显示部分图像，而是显示完整图像。非常感谢@Sushovan回答我的问题。但是，鼠标悬停在整个正面图像上会消失。我想要的是当用户将鼠标移到前面的图像上时，前面的图像逐渐消失并显示下面的图像。就像绘画或擦除正面图像，以显示下面的图像。就像刮彩票一样。@lauratraveler你想要这个吗？

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

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

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);
}