No soy un experto y me gustaría hacer este efecto (link1: https://jsfiddle.net/agbuLop1/
enlace2:https://bryson.qodeinteractive.com/portfolio-carousel/
) en mi sitio web en un carrusel loco con la revolución del control deslizante. Ahora gracias a un amigo que hizo un script, tengo este resultado (http://www.creativethaipuan.com
). Pero desafortunadamente, no funciona correctamente, el cursor hace que el script salga y entre en la función cada vez que muevo el mouse y el cuadro parpadea. Aquí puedes ver el script que estoy usando (https://jsfiddle.net/matbonbon/eco2pf8y/9/)
HTML:
<html>
<head>
<body>
<!-- split the screen in two divs -->
<div id="left" class="mydivs">
<h1>Left</h1>
<p>This is the left side of the screen</p>
</div>
<div id="right" class="mydivs">
<h1>Right</h1>
<p>This is the right side of the screen</p>
</div>
</body>
</head>
</html>
Guion:
var myTexts = {
"left": "This is the left side of the screen",
"right": "This is the right side of the screen"
};
function setHoverDiv(e) {
hoverDiv.innerHTML = myTexts[this.id];
hoverDiv.hidden = false;
}
function hideHoverDiv(e) {
hoverDiv.hidden = true;
}
function moveHoverDiv(e) {
// show the hoverDiv close to the mouse position
hoverDiv.style.top = e.clientY + "px";
hoverDiv.style.left = e.clientX + "px";
}
function createHoverDiv() {
var myDiv = document.createElement("div");
myDiv.id = "newdiv";
myDiv.style.position = "absolute";
myDiv.style.backgroundColor = "red";
myDiv.style.color = "black";
myDiv.style.fontSize = "20px";
myDiv.style.padding = "10px";
myDiv.style.borderRadius = "5px";
myDiv.style.zIndex = "1000";
myDiv.innerHTML = myTexts[this.id];
// show the myDiv close to the mouse position
myDiv.hidden = true;
document.body.appendChild(myDiv);
return myDiv;
}
var hoverDiv = createHoverDiv();
document.body.addEventListener("mousemove", moveHoverDiv);
var mydivs = document.getElementsByClassName("mydivs");
// use an interator to iterate over the divs
for (var i = 0; i < mydivs.length; i++) {
// when the mouse hovers the div, create a new div with a text close to the mouse position
var mydiv = mydivs[i];
mydiv.addEventListener("mouseover", setHoverDiv);
// when mouse leaves the div, remove the new div
mydiv.addEventListener("mouseout", hideHoverDiv);
}
Teniendo en cuenta que lo estoy usando dentro del módulo de revolución del control deslizante, donde puedo configurar secuencias de comandos y CSS personalizados y puedo configurar una Clase y un Id personalizados para cualquier diapositiva en el carrusel. Espero que me puedan ayudar a encontrar una solución. Gracias por tu tiempo y ayuda.
.