prototype_slide.htm

Dateigrösse: 2.78 kb

1 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    
    <title>prototype.js opacity()</title>

<style>
*            { margin:0; padding:0; }
html>body    { margin:10pt; padding:10pt; font-family:georgia,arial,sans-serif; font-size:12pt; height:5000px; }
.paperclip    { cursor:crosshair; width:250pt; margin:20pt; padding:10pt; background:url('../lernen/img/paperclip.gif') bottom right no-repeat; border:1pt solid #B1B1B1; border-radius:5pt; }
#slideDIV    { position:absolute; width:100pt; opacity:0.75; border:2pt solid black; border-radius:10pt; padding:0 10pt; background:palevioletred; }
.out        { position:absolute; top:1px; right:1px; width:120pt; padding:2px 5px; background:palevioletred; }
ul             { padding:2pt 10pt; }
</style>

<script src="../lernen/js/scriptaculous-1.9/lib/prototype.js"></script>
<script src="../lernen/js/scriptaculous-1.9/src/scriptaculous.js"></script>

</head>

<body>
<div id="out" class="out"></div>

<h2>scriptaculous.js slider</h2>

<div id="paperclip" class="paperclip">&nbsp;</div>
        
        <div id="slideDIV" class="container" style="display:none;">
         <ul>
            <p style="padding:5px;">
            <li>primo paso:</li>
          </p>
          <p style="padding:5px;">
            <li>secondo paso:</li>
          </p>
          <p style="padding:5px;">
            <li>terzo paso:</li>
          </p>
          <br>
          </ul>
        </div>        

</body>
</html>

<script>
var elem = $('paperclip');
elem.addEventListener('mouseover', mouseOver);
elem.addEventListener('mouseout', mouseOut);
elem.addEventListener('mousemove', slidePos);

function mouseOver() {
    _fn_appear('slideDIV');
}

function mouseOut() {
    _fn_opacity('slideDIV');
}

function _fn_appear(div) {
    $(div).setOpacity(0);
    $(div).setStyle({display:'block'});
    new Effect.Opacity(div, { from: 0.0, to: 0.75, duration: 0.25 });
    //new Effect.Appear(div, { duration:0.25 });
    return false;
} 
function _fn_opacity(div) {
    new Effect.Opacity(div, { from:0.75, to:0, duration:0.25 });
    return false;
}
function showPos(event) {
  var x = document.all ? event.offsetX : event.pageX;
  var y = document.all ? event.offsetY : event.pageY;
  var out = 'Position: ' + x + ', ' + y;
  $('out').innerHTML = out;
}
window.onmousemove = showPos;
    
function showPosit(event) {
  var x = document.all ? event.offsetX : event.pageX;
  var y = document.all ? event.offsetY : event.pageY;
  console.log('Position: ' + x + ', ' + y + '!');
  //alert('Position: ' + x + ', ' + y + '!');
}
document.body.onclick = showPosit;

function slidePos(e) {
  var x = document.all ? e.offsetX : e.pageX;
  var y = document.all ? e.offsetY : e.pageY;
  x=x+5;
  y=y+5;
  $('slideDIV').style.left = x+'px';
  $('slideDIV').style.top = y+'px';
}
//$('paperclip').onmousemove = slidePos;

</script>