炫酷霸气的HTML5/jQuery应用及源码

var Loader = function () {    
  var loader = document.querySelector('.loader-container'),
      meter = document.querySelector('.meter'),
      k, i = 1,
      counter = function () {
        if (i <= 100) {   
          meter.innerHTML = i.toString();
          i++;
        } else {
          window.clearInterval(k);
        }
      };

    return {
      init: function (options) {
      options = options || {};
      var time = options.time ? options.time : 0,
            interval = time/100;
      
        loader.classList.add('run');
      k = window.setInterval(counter, interval); 
      setTimeout(function () {        
          loader.classList.add('done');
      }, time);
    },
  }
}();

Loader.init({
      // If you have changed the @time in LESS, update this number to the corresponding value. Measured in miliseconds.
      time: 10000
});

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.switch {
    width: 180px;
    height: 55px;
    position: relative;
    margin: 100px auto;
}

.switch label {
    display: block;
    width: 80%;
    height: 100%;
    position: relative;
    background: #1F2736; /*#121823*/
    background: linear-gradient(#121823, #161d2b);
    border-radius: 30px 30px 30px 30px;
    box-shadow:
        inset 0 3px 8px 1px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.2);
        -webkit-transition: all .5s ease;
transition: all .5s ease;

}

.switch input ~ label i {
    display: block;
    height: 51px;
    width: 51px;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 2;
    border-radius: inherit;
    background: #283446; /* Fallback */
    background: linear-gradient(#36455b, #283446);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 8px rgba(0,0,0,0.3),
        0 12px 12px rgba(0,0,0,0.4);
    -webkit-transition: all .5s ease;
transition: all .5s ease;
}


.switch label + span {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 17px;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background: #283446; 
background: gradient-gradient(#36455b, #283446);
box-shadow:
          inset 0 1px 0 rgba(0,0,0,0.2),
          0 1px 0 rgba(255,255,255,0.1),
          0 0 10px rgba(185,231,253,0),
  inset 0 0 8px rgba(0,0,0,0.9),
  inset 0 -2px 5px rgba(0,0,0,0.3),
  inset 0 -5px 5px rgba(0,0,0,0.5);
     -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 2;
}

 /* Toggle */
.switch input:checked ~ label + span { 
    content: "";
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 2;
    background: #b9f3fe; 
background: gradient-gradient(#ffffff, #77a1b9);
box-shadow:        
          inset 0 1px 0 rgba(0,0,0,0.1),
          0 1px 0 rgba(255,255,255,0.1),
          0 0 10px rgba(100,231,253,1),
          inset 0 0 8px rgba( 61,157,247,0.8),
  inset 0 -2px 5px rgba(185,231,253,0.3),
  inset 0 -3px 8px rgba(185,231,253,0.5);

 }

.switch input:checked ~ label i {
    left: auto;
    left: 63%;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 8px rgba(0,0,0,0.3),
        0 8px 8px rgba(0,0,0,0.3),
        inset -1px 0 1px #b9f3fe;

    -webkit-transition: all .5s ease;
transition: all .5s ease;
}

function closeMessage(el) {
  el.addClass('is-hidden');
}

$('.js-messageClose').on('click', function(e) {
  closeMessage($(this).closest('.Message'));
});

$('#js-helpMe').on('click', function(e) {
  alert('Help you we will, young padawan');
  closeMessage($(this).closest('.Message'));
});

$('#js-authMe').on('click', function(e) {
  alert('Okelidokeli, requesting data transfer.');
  closeMessage($(this).closest('.Message'));
});

$('#js-showMe').on('click', function(e) {
  alert("You're off to our help section. See you later!");
  closeMessage($(this).closest('.Message'));
});

$(document).ready(function() {
  setTimeout(function() {
    closeMessage($('#js-timer'));
  }, 5000);
});

.tooltip p { font-family: sans-serif;
             font-size:14px;
  font-weight:300;}

.tooltip { width:120px;
           padding:10px;
           border-radius:3px;
           position:absolute;
           box-shadow:1px 1px 10px 0 #ccc;
           margin: -500px 0 0 -20px;
           background:#fff;
           -webkit-transition:margin .5s ease-in-out;
          -moz-transition:margin .5s ease-in-out;}

.item:hover  {  background:#6d643b;}

.item:hover .tooltip {
           margin:-145px 0 0 -20px;
           -webkit-transition: margin .15s ease-in-out;
  -moz-transition: margin .15s ease-in-out;}

.arrow {
  position:absolute;
  margin:10px 0 0 50px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
}

(function($){
$(function(){

    $('.code-wrapper').on( "mousemove", function(e) {
      var offsets = $(this).offset();
      var fullWidth = $(this).width();
      var mouseX = e.pageX - offsets.left;

      if (mouseX <0) { mouseX = 0; }
      else if (mouseX > fullWidth) { mouseX = fullWidth }


      $(this).parent().find('.divider-bar').css({
        left: mouseX,
        transition: 'none'
      });
      $(this).find('.design-wrapper').css({
        transform: 'translateX(' + (mouseX) + 'px)',
        transition: 'none'
      });
      $(this).find('.design-image').css({
        transform: 'translateX(' + (-1*mouseX) + 'px)',
        transition: 'none'
      });
    });
    $('.divider-wrapper').on( "mouseleave", function() {
      $(this).parent().find('.divider-bar').css({
        left: '50%',
        transition: 'all .3s'
      });
      $(this).find('.design-wrapper').css({
        transform: 'translateX(50%)',
        transition: 'all .3s'
      });
      $(this).find('.design-image').css({
        transform: 'translateX(-50%)',
        transition: 'all .3s'
      });
    });
  
}); // end of document ready
})(jQuery);