MUiiiiito Bom... aeeee Anao Deixei o Efeito ALPHA para voce implementar :)
este exemplo move uma janela dentro do form.. não fica fixo que nem o anterior... basta colocar o mouse sobre o quado, clicar segurar o clique e mover para onde quer (facil né)......
Ve se tem alguma Utilidade
So Copiar e Colar,, e alterar de acordo
<html>
<head>
<script>
var checkZIndex = true;
var dragobject = null;
var tx;
var ty;
var ie5 = document.all != null && document.getElementsByTagName != null;
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if ((temp.className == "moveme") || (temp.className == "handle")){
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
el = getReal(window.event.srcElement)
if (el.className == "moveme" || el.className == "handle") {
if (el.className == "handle") {
tmp = el.getAttribute("handlefor");
if (tmp == null) {
dragobject = null;
return;
}
else
dragobject = eval(tmp);
}
else
dragobject = el;
if (checkZIndex) makeOnTop(dragobject);
ty = window.event.clientY - getTopPos(dragobject);
Pergunta
jissa
MUiiiiito Bom... aeeee Anao Deixei o Efeito ALPHA para voce implementar :)
este exemplo move uma janela dentro do form.. não fica fixo que nem o anterior... basta colocar o mouse sobre o quado, clicar segurar o clique e mover para onde quer (facil né)......
Ve se tem alguma Utilidade
So Copiar e Colar,, e alterar de acordo
<html>
<head>
<script>
var checkZIndex = true;
var dragobject = null;
var tx;
var ty;
var ie5 = document.all != null && document.getElementsByTagName != null;
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if ((temp.className == "moveme") || (temp.className == "handle")){
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
el = getReal(window.event.srcElement)
if (el.className == "moveme" || el.className == "handle") {
if (el.className == "handle") {
tmp = el.getAttribute("handlefor");
if (tmp == null) {
dragobject = null;
return;
}
else
dragobject = eval(tmp);
}
else
dragobject = el;
if (checkZIndex) makeOnTop(dragobject);
ty = window.event.clientY - getTopPos(dragobject);
tx = window.event.clientX - getLeftPos(dragobject);
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else {
dragobject = null;
}
}
function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}
function moveme_onmousemove() {
if (dragobject) {
if (window.event.clientX >= 0 && window.event.clientY >= 0) {
dragobject.style.left = window.event.clientX - tx;
dragobject.style.top = window.event.clientY - ty;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
function getLeftPos(el) {
if (ie5) {
if (el.currentStyle.left == "auto")
return 0;
else
return parseInt(el.currentStyle.left);
}
else {
return el.style.pixelLeft;
}
}
function getTopPos(el) {
if (ie5) {
if (el.currentStyle.top == "auto")
return 0;
else
return parseInt(el.currentStyle.top);
}
else {
return el.style.pixelTop;
}
}
function makeOnTop(el) {
var daiz;
var max = 0;
var da = document.all;
for (var i=0; i<da.length; i++) {
daiz = da.style.zIndex;
if (daiz != "" && daiz > max)
max = daiz;
}
el.style.zIndex = max + 1;
}
if (document.all) { //This only works in IE4 or better
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
}
document.write("<style>");
document.write(".moveme {cursor: move;}");
document.write(".handle {cursor: move;}");
document.write("</style>");
</script>
<style>
<!--
#testDiv {position:relative; height:50px; width:250px; background:#daa520;
border-style:solid; border-width:1px; margin:10px}
#title {background:#ff6347; font:caption; width:100%;
color:#000000; padding:5px; margin:0px; text-align:center}
#inner {margin:0px; padding:3px; height:100%}
-->
</style>
</head>
<body>
<div id="testDiv">
<div class="handle" handlefor="testDiv" id="title">QUEM GOSTOU DO PRIMEIRO EXEMPLO</div>
<div id="inner">
VAI DELIRAR COM O QUE PODE SER FEITO COM O DIV
</div>
</div></body>
Repare que as últimas linhas do script estão com fonte marrom.
Na verdade este trecho não faz parte do script e consiste em propriedades de configuração
CSS da janela. Através dela podemos definir cor de fundo (background:#daa520), formato das
bordas (border-style:solid), texto centralizado (text-align:center), tamanho da janela
(height:50px; width:250px), etc
</html>
Link para o comentário
Compartilhar em outros sites
8 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.