CSS/JAVASCRIPT - AJUDA
10/01/2018
0
Ao passar o mouse no cinza a tela do celular sobe.. só que a tela desce ao tirar o ponteiro de cima.
Gostaria de saber se teria como bloquear e eu conseguir direcionar o ponteiro em cima da tela do celular.
PS: Se tiverem algum exemplo similar, por favor me informar. desde já agradeço!
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var $ativa = $(''''.mostra'''');
var $elemento = $(''''.elemento'''');
$ativa.mouseenter(function () {
if ($elemento.hasClass(''''add-efeito'''')) {
return false;
} else {
$elemento.addClass(''''add-efeito'''');
}
});
$ativa.mouseleave(function () {
if ($elemento.hasClass(''''add-efeito'''')) {
$elemento.removeClass(''''add-efeito'''');
}
});
});
</script>
<style>
div.elemento {
background-image: url(img/smartphone.png);
height: 25rem;
width: 15rem;
position: fixed;
bottom: 0;
left: 0;
display: none
}
div.elemento.add-efeito {
display: block;
animation: efeito .5s
}
@keyframes efeito {
from {
bottom: -35rem
} to {
bottom: 0
}
}
</style>
<a href="#"><div class="mostra"></div></a>
<div class="elemento"></div>
Jean
Posts
10/01/2018
Jean
http://i64.tinypic.com/2yjso5v.png
11/06/2019
Raul Cesar
11/06/2019
Pwcodigo
http://i64.tinypic.com/2yjso5v.png
O link não funcionou.
11/06/2019
Pwcodigo
Ao passar o mouse no cinza a tela do celular sobe.. só que a tela desce ao tirar o ponteiro de cima.
Gostaria de saber se teria como bloquear e eu conseguir direcionar o ponteiro em cima da tela do celular.
PS: Se tiverem algum exemplo similar, por favor me informar. desde já agradeço!
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var $ativa = $(''''.mostra'''');
var $elemento = $(''''.elemento'''');
$ativa.mouseenter(function () {
if ($elemento.hasClass(''''add-efeito'''')) {
return false;
} else {
$elemento.addClass(''''add-efeito'''');
}
});
$ativa.mouseleave(function () {
if ($elemento.hasClass(''''add-efeito'''')) {
$elemento.removeClass(''''add-efeito'''');
}
});
});
</script>
<style>
div.elemento {
background-image: url(img/smartphone.png);
height: 25rem;
width: 15rem;
position: fixed;
bottom: 0;
left: 0;
display: none
}
div.elemento.add-efeito {
display: block;
animation: efeito .5s
}
@keyframes efeito {
from {
bottom: -35rem
} to {
bottom: 0
}
}
</style>
<a href="#"><div class="mostra"></div></a>
<div class="elemento"></div>Manda o link da imagem original
background-image: url(img/smartphone.png);
11/06/2019
Pwcodigo
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
function elementoExibir(iddocss){
if(document.getElementById){
var el = document.getElementById(iddocss);
el.style.display= (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
elementoExibir('elemento');
}
</script>
<style>
#elemento{
background-image:url(https://images.samsung.com/is/image/samsung/africa-pt-galaxy-j6-j600-sm-j600fzvaxfe-frontviolet-117376323?$PD_GALLERY_L_JPG$);
width: 900px;
height:700px;
diplay:none;
background-repeat:no-repeat;
background-size: 900ox 900px;
overflow:auto;
}
</style>
<button style='cursor: pointer;' onClick="elementoExibir('elemento')">Mostrar</button>
<div id="elemento">
</div>
11/06/2019
Pwcodigo
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
function elementoExibir(iddocss){
if(document.getElementById){
var el = document.getElementById(iddocss);
el.style.display= (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
elementoExibir('elemento');
}
</script>
<style>
#elemento{
background-image:url(https://images.samsung.com/is/image/samsung/africa-pt-galaxy-j6-j600-sm-j600fzvaxfe-frontviolet-117376323?$PD_GALLERY_L_JPG$);
width: 900px;
height:700px;
diplay:none;
background-repeat:no-repeat;
background-size: 900ox 900px;
overflow:auto;
}
</style>
<button style='cursor: pointer;' onClick="elementoExibir('elemento')">Mostrar</button>
<div id="elemento">
</div>
Eu sei que não tem nada a ver, como eu li rápido achei que para mostrar e ocultar, e depois de fica pesquisando e concluir o código foi ver que você queria outra coisa.
Clique aqui para fazer login e interagir na Comunidade :)