API tools faq
paste
Advertisement
terorama

JQuery Examples

terorama
Oct 17th, 2012
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 13.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
  5. <meta name="description" content="JQuery tests" />
  6.  
  7. <title>JQuery tests</title>
  8. <script src="jquery.min.js"></script>
  9.  
  10.  
  11. <style type="text/css">
  12.    .sq {
  13.       position:absolute;
  14.       background-color:red;
  15.       width:50px;
  16.       height:50px;
  17.    }
  18.    
  19.    .sqo {
  20.       background-color:#fa0;
  21.       position:relative;
  22.       border:solid 1px #888;
  23.       float:left;
  24.       margin:5px;
  25.    }
  26.    
  27.    .sqz {
  28.       width:200px;
  29.       height:200px;
  30.       border:solid 1px red;
  31.    
  32.    }
  33.    
  34.    .bgz {
  35.       position:absolute;
  36.       width:200px;
  37.       height:200px;
  38.       background-color:#f5f5f5;
  39.       border:solid 1px #aaa;
  40.       z-index:300;
  41.       padding:25px;
  42.    }
  43.    
  44.    
  45.    .lsq {
  46.       width:50px;
  47.       height:50px;
  48.       border:solid 1px #888;
  49.       background-color:#eee;
  50.       float:left;
  51.       margin:4px;
  52.       cursor:pointer;
  53.    }
  54.    
  55.    .uuu {
  56.       width:200px;
  57.       height:100px;
  58.       border:solid 1px #777;
  59.       background-color:#f5f5f5;
  60.       position:absolute;
  61.       padding:10px;
  62.    }
  63. </style>
  64.  
  65. <script type="text/javascript">
  66.  
  67.    function  ra(x)  {
  68.    
  69.       return Math.floor(Math.random()*x);
  70.    }
  71.    
  72.    function rgbr() {
  73.       return 'rgb('+ra(255)+','+ra(255)+','+ra(255)+')';
  74.    }
  75.  
  76.    //-----------------------------------------------------
  77.    function mktabs() {
  78.       var b=$(document.body);
  79.      
  80.       b.append($('<div/>', {'class':'bgz'}).css({'left':100, 'top':400}));
  81.       b.append($('<div/>', {'class':'bgz'}).css({'left':400, 'top':400}));
  82.      
  83.       $('.bgz:first').append($('<table/>',
  84.                                   {cellspacing:"0",
  85.                                    cellpadding: "8",
  86.                                    border: "1",
  87.                                    bordercolor: "#aaa"
  88.                                    }));
  89.      
  90.       tab = $('.bgz:first').children(':first').get(0);
  91.      
  92.       var sect = tab.tBodies[0] && tab.tBodies[tab.tBodies.length-1] || tab;
  93.      
  94.       for (var i=0; i<5; i++) {
  95.      
  96.          var row = sect.insertRow(i);
  97.          for (var j=0; j<5; j++) {
  98.             var cell= row.insertCell(j);
  99.             cell.innerHTML=i+'<sup>'+j+'</sup>';
  100.          }
  101.       }
  102.      
  103.       var tabd = $('table[bordercolor="#aaa"] td');
  104.       tabd.css('cursor','pointer');
  105.      
  106.       tabd.hover(function(ev) {
  107.      
  108.         var curel=$(this);
  109.         var currow = $(this).parent();
  110.         //-----------------------------
  111.         $(this).parent().parent().find('td[rel!="inff"]').filter(
  112.            function(index) {
  113.              
  114.                              
  115.               return $(this).parent().get(0)!==currow.get(0);
  116.              
  117.            }
  118.         ).css('background-color','');
  119.         //-----------------------------
  120.         $(this).parent().children('td[rel!="inff"]').filter(
  121.            
  122.            function(index) {
  123.            
  124.               return $(this).get(0)!=curel.get(0)
  125.            }
  126.         ).css('background-color','#fee');
  127.         $(this).css('background-color','white');
  128.        
  129.       });
  130.       tabd.click(function(ev) {
  131.          $(this).css({display:'block', 'position':'absolute'})
  132.          .attr('rel','inff')
  133.          .css({left: $(this).position().left,
  134.                top: $(this).position().top})
  135.          .animate({
  136.             'left': '+='+ra(100),
  137.             'top': '+='+ra(100)},"slow");
  138.       });
  139.      
  140.       //----------------------------------
  141.       //         form
  142.       //----------------------------------
  143.       el = $('.bgz:empty');
  144.       el.append($('<form/>').append($('<fieldset/>')
  145.                               .append($('<legend/>').text('checks'))
  146.                               .append($('<p/>').text('New York')
  147.                                  .append($('<input/>',{type:'checkbox',
  148.                                                     name:'city[]',
  149.                                                     value:'NY'})))
  150.                               .append($('<p/>').text('London')
  151.                                  .append($('<input/>', {type:'checkbox',
  152.                                                        name: 'city[]',
  153.                                                        value:'london'})))
  154.                               .append($('<p/>').text('Tokio')
  155.                                  .append($('<input/>', {type:'checkbox',
  156.                                                         name: 'city[]',
  157.                                                         value:'tokio'})))));
  158.                                                        
  159.                                                    
  160.     el.find('form input[type="checkbox"]').change(
  161.        function(ev) {
  162.        
  163.           var actEl = this;
  164.          
  165.          
  166.           if ($(this).attr('checked')!==undefined) {
  167.            
  168.              els = $(this).parent().parent().find('input[type="checkbox"]')
  169.              
  170.              els.each ( function(index,ele) {
  171.                 //alert($(ele).attr('value'));
  172.                 //alert(index);
  173.                
  174.                 if ($(this).get(0)!==actEl) {
  175.                    $(this).removeAttr('checked');
  176.                 }
  177.                
  178.              })
  179.              }
  180.              
  181.        }
  182.     )  
  183.      
  184.      
  185.    }
  186.    //-----------------------------------------------------
  187.    function init_anim() {
  188.    
  189.       glMX=0;
  190.       glMY=0;
  191.      
  192.       mktabs();
  193.      
  194.       $(document).mousemove(
  195.          function(ev) {
  196.             glMX = ev.clientX + document.documentElement.scrollLeft;
  197.             glMY = ev.clientY + document.documentElement.scrollTop;
  198.          }
  199.       )
  200.    
  201.    
  202.       //-----------------------------------------
  203.       var el = $('<div>',{class:'sq', id:'element-1'});
  204.      
  205.       function fireworks() {
  206.          
  207.          for(var i=0; i<20; i++) {
  208.             $(this).clone().css({
  209.                
  210.                'left':$(this).position().left,
  211.                'top':$(this).position().top})
  212.                .appendTo(document.body)
  213.                .animate({'left':'-='+ra(2000), 'top':'-='+ra(2000), 'opacity':0},
  214.                   ra(3000))
  215.                .queue( function() {
  216.                   $(this).remove();
  217.                });
  218.            
  219.          }
  220.          $(this).dequeue();
  221.       }
  222.       //-------------------------------
  223.       el.hover(
  224.          function(ev) {
  225.            
  226.             var newX = $(this).position().left+ra(200);
  227.             var newY = $(this).position().top + ra(200);
  228.            
  229.             $(this).css('background-color',rgbr())
  230.                .queue( fireworks)              
  231.                .animate({'left': newX,
  232.                'top': newY},
  233.                500);
  234.                
  235.                
  236.                 var cent=false;
  237.                  if ((newX>window.innerWidth) || (newX<0)) {
  238.                     newX = Math.floor(window.innerWidth/2);
  239.                     cent=true;
  240.                  }
  241.                
  242.                  if ((newY>window.innerHeight) || (newY<0)) {
  243.                     newY = Math.floor(window.innerHeight/2);
  244.                     cent=true;
  245.                  }
  246.                  if (cent===true) {
  247.                    
  248.                     $(this).animate({'left':newX, 'top':newY});
  249.                     }
  250.    
  251.          },
  252.          
  253.          function(ev) {
  254.            $(this).queue( function() {
  255.                  
  256.                  var newX=$(this).position().left-ra(200);
  257.                  var newY=$(this).position().top-ra(200);
  258.                  
  259.                  $(this).css('background-color', rgbr())
  260.                  
  261.                  .delay(500).queue(fireworks).animate({
  262.                 'left': newX,
  263.                 'top': newY},
  264.                 500);
  265.                
  266.                  var cent=false;
  267.                  if ((newX>window.innerWidth) || (newX<0)) {
  268.                     newX = Math.floor(window.innerWidth/2);
  269.                     cent=true;
  270.                  }
  271.                
  272.                  if ((newY>window.innerHeight) || (newY<0)) {
  273.                     newY = Math.floor(window.innerHeight/2);
  274.                     cent=true;
  275.                  }
  276.                  if (cent===true) {
  277.                    
  278.                     $(this).animate({'left':newX, 'top':newY});
  279.                     }
  280.                  
  281.                  $(this).dequeue();
  282.                  }
  283.                  
  284.             );
  285.                        
  286.          })
  287.      
  288.       glInt = setInterval(movelbox, 8000);
  289.       //----------------------------------------
  290.       function movelbox() {
  291.          var el =  $('#element-1').parent();
  292.          
  293.          var x = el.position().left;
  294.          var y = el.position().top;
  295.          
  296.            if (el.queue('fx').length>10)
  297.               el.clearQueue();
  298.            
  299.            el.animate({left:glMX-100, top:glMY-100}, "slow");
  300.          
  301.       }
  302.      
  303.       var b = $(document.body);
  304.      
  305.       b.append(el);
  306.      
  307.       var z = el.clone();
  308.      
  309.       b.append(z);
  310.       z.css('background-color','green');
  311.      
  312.       $('.sq:first').animate({
  313.      
  314.          left: Math.floor($(document).width()/2),
  315.          top: Math.floor($(document).height()/2)
  316.       });
  317.       $.when(z.animate({'left':'100', 'top':'100'}, 'slow')).done (
  318.       function() {
  319.          z.wrap('<div/>');
  320.          z.parent().addClass('sqz').css('position','absolute')
  321.          .css({'z-index':100,'background-color':'#f5f5f5'})
  322.                                  /*.append(
  323.                                           $('.sq:first').animate({'opacity':0.5},"slow"))*/
  324.                                          
  325.          .animate({left: 800, top: 400}, "slow")
  326.          .bind('mouseover', function(ev){
  327.                    
  328.  
  329.                            ev.stopPropagation();
  330.                                      
  331.                            if ($(this).data('busy')===true)
  332.                               return true;
  333.                                                        
  334.                             $(this).data('busy',true);
  335.          
  336.                             if (!($(this).data('wd')))
  337.                                $(this).data('wd',$(this).width());
  338.                                                        
  339.                             $(this).css({'background-color': 'rgb(255,200,200)'})
  340.                            
  341.                             .animate({width:'50',height:'50'},"slow")
  342.                             .animate({width: $(this).data('wd'), height: $(this).data('wd')})
  343.                             .queue(
  344.                                function() {
  345.                                  
  346.                                   $(this).css('background-color', '#eee');
  347.                                   $(this).data('busy', false);
  348.                                   $(this).dequeue();
  349.                                });
  350.                            
  351.                             })
  352.           .bind('mousedown', function(ev) {
  353.          
  354.              ev.preventDefault();
  355.                          
  356.              $(this).data('pressed',true);
  357.              $(this).data('difx',
  358.                 ev.clientX+document.documentElement.scrollLeft-
  359.                 $(this).offset().left);
  360.                
  361.              $(this).data('dify',
  362.                 ev.clientY+document.documentElement.scrollTop-
  363.                 $(this).position().top);
  364.              
  365.           })
  366.          
  367.           .bind('mouseup', function (ev) {
  368.              $(this).data('pressed',false);
  369.           })
  370.           .bind('mouseout', function(ev) {
  371.              $(this).trigger('mouseup');
  372.           })
  373.           .bind('mousemove', function(ev) {
  374.            
  375.              if ($(this).data('pressed')===true) {
  376.              
  377.                  
  378.                 $(this).css('left',
  379.                 ev.clientX -$(this).data('difx'));
  380.                
  381.                 $(this).css('top', ev.clientY - $(this).data('dify'));
  382.              }
  383.                
  384.           })
  385.  
  386.          
  387.                            
  388.          
  389.       } );
  390.      
  391.       var t = $('<input>', {type:'text', name:'posinf'});
  392.       b.append(t);
  393.      
  394.       //--------------------------------------------
  395.       var move_func = function (ev) {
  396.      
  397.          var elinf = $('input[name="posinf"]');
  398.          elinf.attr('value', ev.pageX+'-'+ev.pageY+'-'+ev.clientX+'-'+ev.clientY);
  399.       }
  400.       $(document).bind('mousemove', move_func)
  401.       //---------------------------------------------
  402.      
  403.       b3 = $(document.createElement('DIV'));
  404.       b3.prependTo(b);
  405.      
  406.       ani3=false;
  407.       b3.css({'border':'solid 1px #888',
  408.                'position':'absolute'}).animate({'left':screen.width/3,
  409.                              'top':screen.height/4,
  410.                             'width':'400', 'height':'200'},400, complete_ani);
  411.        
  412.       //---------------------------------------------
  413.       function complete_ani() {
  414.          ani3=true;
  415.       }
  416.      
  417.       setTimeout(next_step,1000);
  418.       //---------------------------------------------
  419.      
  420.       $('div:last').after('<div/>');
  421.      
  422.       el=$('div:last');
  423.      
  424.       el.addClass('sqz').css('position','absolute').animate
  425.          ({left: document.documentElement.clientWidth/5,
  426.          top:document.documentElement.clientHeight/4});
  427.    
  428.       var ff = $('<div>',{class:'lsq'});   
  429.       for (var i=0; i<9; i++) {
  430.          ff.clone().appendTo(el).append($('<div>', {style:'padding:20px'}))
  431.          .children().first().text(i+1)
  432.          .end().end().click( {inf:i+1}, click3);
  433.       }
  434.  
  435.       //-------------------------------------------
  436.       function click3(ev) {
  437.      
  438.          addsibl = function() {
  439.             var sibl= $(this).after($('<div/>').addClass($(this).attr('class'))
  440.                                       .append($(this).contents().clone())
  441.                                      
  442.                                       .on('click',arguments.callee)
  443.                                       .on('mouseover',
  444.                                          function(ev) {
  445.                                             $(this).fadeOut('slow');
  446.                                          })
  447.                                       .css({'background-color': '#fee'})
  448.                                      
  449.                                      
  450.                                       );
  451.                                      
  452.            
  453.             $(this).dequeue();
  454.          }
  455.          $(this).fadeOut("slow").fadeIn("slow").queue(addsibl);
  456.          //---------------------------------
  457.          var a= $('<div class="uuu"/>').hide().appendTo(document.body);
  458.          
  459.          a.append($('<p/>').text(ev.data.inf));
  460.          p=a.find('p:first');
  461.          p.after($('<p/>').text('mousekey'+ev.which));
  462.          
  463.          a.css({left:600, top:10}).toggle("slow").delay(1000)
  464.          .slideToggle(1000, function() {$(this).remove()});
  465.       }
  466.                            
  467.    }
  468.     //---------------------------------------------
  469.     //---------------------------------------------
  470.      
  471.    function next_step() {
  472.    
  473.          if (!ani3) {
  474.             setTimeout(arguments.callee,1000);
  475.             return;
  476.          }
  477.    
  478.          click4 = function(ev) {
  479.          
  480.             ev = ev || event;
  481.             t = ev.target;
  482.            
  483.            
  484.             for (var i=0; i<20; i++) {
  485.                var z = $(t).clone().css({'position':'absolute',
  486.                                          'top':$(t).offset().top,
  487.                                          'left':$(t).offset().left})
  488.                .appendTo($(document.body));
  489.                z.delay(ra(500)).animate({left:'-='+ra(2000), top:'-='+ra(2000)},ra(3000))
  490.                         .queue( function() {$(this).remove();})
  491.                      //.end().clone().delay(400).animate({left:200, top:300},500)
  492.                     // .queue( function() {$(this).remove();});
  493.             }
  494.          }
  495.          //---------------------------------------------
  496.          for (i=0; i<5; i++) {
  497.             b3.append($('<div/>'));
  498.        
  499.          }
  500.          
  501.              b3.children('div').addClass('sq sqo').each(
  502.                                      function(j){
  503.                                          $(this).bind('click',{inf4:j+1},
  504.                                              function(ev) {click4(ev);});});
  505.                                              
  506.          
  507.          $('div[style*="solid"]').children().filter(':eq(0)').css('background-color','red')
  508.          .end().filter(':gt(3)').css('background-color','#fa8')
  509.          .end().filter(':nth-child(3)').css('background-color','green')
  510.          .end().filter(':eq(1)').add('div[style*="solid"] div:eq(3)').fadeOut("slow")
  511.          .fadeIn("slow")
  512.          .slideUp("slow")
  513.          .slideDown("slow").fadeTo('slow',0.5, next3_step);
  514.    }
  515.    
  516.    //---------------------------------------------
  517.    function next3_step() {
  518.      
  519.       var els = $('div[style*="solid"]').children();
  520.      
  521.       els.fadeToggle("slow").fadeToggle("slow")
  522.       .hide('400')
  523.       .show(500)
  524.    }
  525.    
  526.    
  527.    $(document).ready(init_anim);
  528. </script>
  529.  
  530. </head>
  531.  
  532. <body>
  533. </body>
  534. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!