prototype_slide.htm

Dateigrösse: 2.78 kb

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5     
 6     <title>prototype.js opacity()</title>
 7 
 8 <style>
 9 *            { margin:0; padding:0; }
10 html>body    { margin:10pt; padding:10pt; font-family:georgia,arial,sans-serif; font-size:12pt; height:5000px; }
11 .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; }
12 #slideDIV    { position:absolute; width:100pt; opacity:0.75; border:2pt solid black; border-radius:10pt; padding:0 10pt; background:palevioletred; }
13 .out        { position:absolute; top:1px; right:1px; width:120pt; padding:2px 5px; background:palevioletred; }
14 ul             { padding:2pt 10pt; }
15 </style>
16 
17 <script src="../lernen/js/scriptaculous-1.9/lib/prototype.js"></script>
18 <script src="../lernen/js/scriptaculous-1.9/src/scriptaculous.js"></script>
19 
20 </head>
21 
22 <body>
23 <div id="out" class="out"></div>
24 
25 <h2>scriptaculous.js slider</h2>
26 
27 <div id="paperclip" class="paperclip">&nbsp;</div>
28         
29         <div id="slideDIV" class="container" style="display:none;">
30          <ul>
31             <p style="padding:5px;">
32             <li>primo paso:</li>
33           </p>
34           <p style="padding:5px;">
35             <li>secondo paso:</li>
36           </p>
37           <p style="padding:5px;">
38             <li>terzo paso:</li>
39           </p>
40           <br>
41           </ul>
42         </div>        
43 
44 </body>
45 </html>
46 
47 <script>
48 var elem = $('paperclip');
49 elem.addEventListener('mouseover', mouseOver);
50 elem.addEventListener('mouseout', mouseOut);
51 elem.addEventListener('mousemove', slidePos);
52 
53 function mouseOver() {
54     _fn_appear('slideDIV');
55 }
56 
57 function mouseOut() {
58     _fn_opacity('slideDIV');
59 }
60 
61 function _fn_appear(div) {
62     $(div).setOpacity(0);
63     $(div).setStyle({display:'block'});
64     new Effect.Opacity(div, { from: 0.0, to: 0.75, duration: 0.25 });
65     //new Effect.Appear(div, { duration:0.25 });
66     return false;
67 } 
68 function _fn_opacity(div) {
69     new Effect.Opacity(div, { from:0.75, to:0, duration:0.25 });
70     return false;
71 }
72 function showPos(event) {
73   var x = document.all ? event.offsetX : event.pageX;
74   var y = document.all ? event.offsetY : event.pageY;
75   var out = 'Position: ' + x + ', ' + y;
76   $('out').innerHTML = out;
77 }
78 window.onmousemove = showPos;
79     
80 function showPosit(event) {
81   var x = document.all ? event.offsetX : event.pageX;
82   var y = document.all ? event.offsetY : event.pageY;
83   console.log('Position: ' + x + ', ' + y + '!');
84   //alert('Position: ' + x + ', ' + y + '!');
85 }
86 document.body.onclick = showPosit;
87 
88 function slidePos(e) {
89   var x = document.all ? e.offsetX : e.pageX;
90   var y = document.all ? e.offsetY : e.pageY;
91   x=x+5;
92   y=y+5;
93   $('slideDIV').style.left = x+'px';
94   $('slideDIV').style.top = y+'px';
95 }
96 //$('paperclip').onmousemove = slidePos;
97 
98 </script>
99