daily pastebin goal
26%
SHARE
TWEET

Untitled

a guest Dec 7th, 2017 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Code</title>
  6. <script src="../js/jquery.js"></script>
  7. <script src="JSjQSurprise/script.js"> </script>
  8. <style type="text/css">
  9. .teaser
  10. {
  11.     width: 100%;
  12.     background-color:red;
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     text-align: center;
  17.     height: 25px;
  18. }
  19.  
  20. .surprise
  21. {
  22.     height: 200px;
  23.     line-height: 200px;
  24.     vertical-align: middle;
  25.     background-color:red;
  26.     font-size: 60px;
  27.     text-align: center;
  28.     position: absolute;
  29.     width: 100%;
  30.     top: 25px;
  31.     left: 0;
  32.     /*display: none;*/
  33. }
  34. </style>
  35. <script>
  36.     $( document ).ready(function() {
  37.     $( ".surprise" ).hide();
  38.    
  39.     $( ".teaser" ).hover(function() {
  40.     $( ".surprise" ).slideDown();  
  41.     });
  42.     //als je klikt op .teaser dan moet de .surprise naar beneden scrollen/ verschijnen.
  43.    
  44.     $( ".surprise" ).click(function(){
  45.         $( ".surprise" ).slideUp();
  46.     });
  47.     //als je klikt op .surprise dan moet de .surprise terug verdwijnen/ naar boven scrollen.        
  48. });
  49.     </script>
  50.  
  51. </head>
  52. <body >
  53. <h1>jQuery</h1>
  54. <p>
  55.  1. wanneer de <em>muiscursor</em> over de rode "teaser" bovenaan komt, dan moet de surprise div naar beneden schuiven.
  56. <br>2. <em>klik</em> je daarna op de surprise div, dan moet die surprise div opnieuw naar boven schuiven.
  57. </p>
  58. <hr>
  59.  
  60. <div class="surprise">Surprise!</div>
  61. <div class="teaser">
  62.     Mouse hover here!
  63. </div>
  64.  
  65. </body>
  66. </html>
RAW Paste Data
Top