超炫酷的jQuery/HTML5應用效果及原始碼

edithfang發表於2014-08-21

今天向大家收集了一些關於HTML5和jQuery的應用及其原始碼,一起來看看。

HTML5動感的火焰燃燒動畫特效

這又是一款基於HTML5的超炫動畫特效,是一款動感的火焰燃燒動畫效果。這款HTML5動畫火焰燃燒非常逼真。

核心jQuery程式碼:
$( document ).ready(function() {

  // Set canvas drawing surface
  var space = document.getElementById("surface");
  var surface = space.getContext("2d");
  surface.scale(1,1);

  // Set Particles
  var particles = [];
  var particle_count = 150;
  for(var i = 0; i < particle_count; i++) {
        particles.push(new particle());
    }
  var time = 0;
  // Set wrapper and canvas items size
  var canvasWidth=320;
  var canvasHeight=480;
  $(".wrapper").css({width:canvasWidth,height:canvasHeight});
  $("#surface").css({width:canvasWidth,height:canvasHeight});

  // shim layer with setTimeout fallback from Paul Irish
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 6000 / 60);
            };
  })(); 

  function particle() {

        this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5};
     canvasWidth = (document.getElementById("surface").width);
     canvasHeight= (document.getElementById("surface").height);
     this.location = {x: canvasWidth/2, y: (canvasHeight/2)+35};

        this.radius = .5+Math.random()*1;

        this.life = 10+Math.random()*10;
        this.death = this.life;

        this.r = 255;
        this.g = Math.round(Math.random()*155);
        this.b = 0;
    }

  function ParticleAnimation(){
        surface.globalCompositeOperation = "source-over";
        surface.fillStyle = "black";
        surface.fillRect(0, 0, canvasWidth, canvasHeight);
        surface.globalCompositeOperation = "lighter";

        for(var i = 0; i < particles.length; i++)
        {
            var p = particles[i];

            surface.beginPath();

            p.opacity = Math.round(p.death/p.life*100)/100
            var gradient = surface.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
            gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
            gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
            gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
            surface.fillStyle = gradient;
            surface.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
            surface.fill();
            p.death--;
            p.radius++;
            p.location.x += (p.speed.x);
            p.location.y += (p.speed.y);

            //regenerate particles
            if(p.death < 0 || p.radius < 0){
                //a brand new particle replacing the dead one
                particles[i] = new particle();
            }
        }

  requestAnimFrame(ParticleAnimation);

}

ParticleAnimation();

});

線上演示   原始碼下載


jQuery向量SVG地圖外掛JVectorMap

JVectorMap是一款基於jQuery的向量地圖外掛,它是基於SVG結構的,和其他jQuery地圖外掛不同的是,jVectorMap是向量地圖。

核心jQuery程式碼:
jQuery(function(){
      var $ = jQuery;

      $('#focus-single').click(function(){
        $('#map1').vectorMap('set', 'focus', 'AU');
      });
      $('#focus-multiple').click(function(){
        $('#map1').vectorMap('set', 'focus', ['AU', 'JP']);
      });
      $('#focus-init').click(function(){
        $('#map1').vectorMap('set', 'focus', 1, 0, 0);
      });
      $('#map1').vectorMap({
        map: 'world_mill_en',
        focusOn: {
          x: 0.5,
          y: 0.5,
          scale: 2
        },
        series: {
          regions: [{
            scale: ['#C8EEFF', '#0071A4'],
            normalizeFunction: 'polynomial',
            values: {
              "AF": 16.63,
              "AL": 11.58,
              "DZ": 158.97,
              "AO": 85.81,
              "AG": 1.1,
              "AR": 351.02,
              "AM": 8.83,
              "AU": 1219.72,
              "AT": 366.26,
              "AZ": 52.17,
              "BS": 7.54,
              "BH": 21.73,
              "BD": 105.4,
              "BB": 3.96,
              "BY": 52.89,
              "BE": 461.33,
              "BZ": 1.43,
              "BJ": 6.49,
              "BT": 1.4,
              "BO": 19.18,
              "BA": 16.2,
              "BW": 12.5,
              "BR": 2023.53,
              "BN": 11.96,
              "BG": 44.84,
              "BF": 8.67,
              "BI": 1.47,
              "KH": 11.36,
              "CM": 21.88,
              "CA": 1563.66,
              "CV": 1.57,
              "CF": 2.11,
              "TD": 7.59,
              "CL": 199.18,
              "CN": 5745.13,
              "CO": 283.11,
              "KM": 0.56,
              "CD": 12.6,
              "CG": 11.88,
              "CR": 35.02,
              "CI": 22.38,
              "HR": 59.92,
              "CY": 22.75,
              "CZ": 195.23,
              "DK": 304.56,
              "DJ": 1.14,
              "DM": 0.38,
              "DO": 50.87,
              "EC": 61.49,
              "EG": 216.83,
              "SV": 21.8,
              "GQ": 14.55,
              "ER": 2.25,
              "EE": 19.22,
              "ET": 30.94,
              "FJ": 3.15,
              "FI": 231.98,
              "FR": 2555.44,
              "GA": 12.56,
              "GM": 1.04,
              "GE": 11.23,
              "DE": 3305.9,
              "GH": 18.06,
              "GR": 305.01,
              "GD": 0.65,
              "GT": 40.77,
              "GN": 4.34,
              "GW": 0.83,
              "GY": 2.2,
              "HT": 6.5,
              "HN": 15.34,
              "HK": 226.49,
              "HU": 132.28,
              "IS": 12.77,
              "IN": 1430.02,
              "ID": 695.06,
              "IR": 337.9,
              "IQ": 84.14,
              "IE": 204.14,
              "IL": 201.25,
              "IT": 2036.69,
              "JM": 13.74,
              "JP": 5390.9,
              "JO": 27.13,
              "KZ": 129.76,
              "KE": 32.42,
              "KI": 0.15,
              "KR": 986.26,
              "KW": 117.32,
              "KG": 4.44,
              "LA": 6.34,
              "LV": 23.39,
              "LB": 39.15,
              "LS": 1.8,
              "LR": 0.98,
              "LY": 77.91,
              "LT": 35.73,
              "LU": 52.43,
              "MK": 9.58,
              "MG": 8.33,
              "MW": 5.04,
              "MY": 218.95,
              "MV": 1.43,
              "ML": 9.08,
              "MT": 7.8,
              "MR": 3.49,
              "MU": 9.43,
              "MX": 1004.04,
              "MD": 5.36,
              "MN": 5.81,
              "ME": 3.88,
              "MA": 91.7,
              "MZ": 10.21,
              "MM": 35.65,
              "NA": 11.45,
              "NP": 15.11,
              "NL": 770.31,
              "NZ": 138,
              "NI": 6.38,
              "NE": 5.6,
              "NG": 206.66,
              "NO": 413.51,
              "OM": 53.78,
              "PK": 174.79,
              "PA": 27.2,
              "PG": 8.81,
              "PY": 17.17,
              "PE": 153.55,
              "PH": 189.06,
              "PL": 438.88,
              "PT": 223.7,
              "QA": 126.52,
              "RO": 158.39,
              "RU": 1476.91,
              "RW": 5.69,
              "WS": 0.55,
              "ST": 0.19,
              "SA": 434.44,
              "SN": 12.66,
              "RS": 38.92,
              "SC": 0.92,
              "SL": 1.9,
              "SG": 217.38,
              "SK": 86.26,
              "SI": 46.44,
              "SB": 0.67,
              "ZA": 354.41,
              "ES": 1374.78,
              "LK": 48.24,
              "KN": 0.56,
              "LC": 1,
              "VC": 0.58,
              "SD": 65.93,
              "SR": 3.3,
              "SZ": 3.17,
              "SE": 444.59,
              "CH": 522.44,
              "SY": 59.63,
              "TW": 426.98,
              "TJ": 5.58,
              "TZ": 22.43,
              "TH": 312.61,
              "TL": 0.62,
              "TG": 3.07,
              "TO": 0.3,
              "TT": 21.2,
              "TN": 43.86,
              "TR": 729.05,
              "TM": 0,
              "UG": 17.12,
              "UA": 136.56,
              "AE": 239.65,
              "GB": 2258.57,
              "US": 14624.18,
              "UY": 40.71,
              "UZ": 37.72,
              "VU": 0.72,
              "VE": 285.21,
              "VN": 101.99,
              "YE": 30.02,
              "ZM": 15.69,
              "ZW": 5.57
            }
          }]
        }
      });
    })


線上演示   原始碼下載


CSS3圖片傾斜效果 可傾斜四個角度

線上演示   原始碼下載


頁碼可滾動的jQuery分頁外掛jPaginate

jPaginate是一款基於jQuery的分頁外掛,這款jQuery分頁外掛有一個特點,就是隨著滑鼠點選頁碼,頁碼會向前或向後滾動。

核心jQuery程式碼:
$(function() {
            $("#demo1").paginate({
                count         : 100,
                start         : 1,
                display     : 8,
                border                    : true,
                border_color            : '#fff',
                text_color              : '#fff',
                background_color        : 'black',    
                border_hover_color        : '#ccc',
                text_hover_color          : '#000',
                background_hover_color    : '#fff', 
                images                    : false,
                mouse                    : 'press'
            });
            $("#demo2").paginate({
                count         : 50,
                start         : 5,
                display     : 10,
                border                    : false,
                text_color              : '#888',
                background_color        : '#EEE',    
                text_hover_color          : 'black',
                background_hover_color    : '#CFCFCF'
            });
            $("#demo3").paginate({
                count         : 50,
                start         : 20,
                display     : 12,
                border                    : true,
                border_color            : '#BEF8B8',
                text_color              : '#68BA64',
                background_color        : '#E3F2E1',    
                border_hover_color        : '#68BA64',
                text_hover_color          : 'black',
                background_hover_color    : '#CAE6C6', 
                rotate      : false,
                images        : false,
                mouse        : 'press'
            });
            $("#demo4").paginate({
                count         : 50,
                start         : 20,
                display     : 12,
                border                    : false,
                text_color              : '#79B5E3',
                background_color        : 'none',    
                text_hover_color          : '#2573AF',
                background_hover_color    : 'none', 
                images        : false,
                mouse        : 'press'
            });
            $("#demo5").paginate({
                count         : 10,
                start         : 1,
                display     : 7,
                border                    : true,
                border_color            : '#fff',
                text_color              : '#fff',
                background_color        : 'black',    
                border_hover_color        : '#ccc',
                text_hover_color          : '#000',
                background_hover_color    : '#fff', 
                images                    : false,
                mouse                    : 'press',
                onChange                 : function(page){
                                            $('._current','#paginationdemo').removeClass('_current').hide();
                                            $('#p'+page).addClass('_current').show();
                                          }
            });
        });


線上演示   原始碼下載


jQuery寬屏遊戲焦點圖 Tab圖片切換按鈕

這款jQuery焦點圖是寬屏的,因此外觀看上去非常大氣。

核心jQuery程式碼:

$(function () {
    var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0, autoChange = function () {
        i += 1;
        if (i === 4) { i = 0; }
        $btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
        var curr = $box.find('a:eq(' + i + ')'), prev = curr.siblings();
        prev.css('z-index', 2);
        curr.css('z-index', 3).animate({
            'opacity': 1
        }, 150, function () {
            prev.css({
                'z-index': 1, 'opacity': 0.1
            });
        });
    }, loop = setInterval(autoChange, 5000);
    $con.hover(function () {
        clearInterval(loop);
    }, function () {
        loop = setInterval(autoChange, 5000);
    });
    $btns.find('a').click(function () {
        i = $(this).index() - 1;
        autoChange();
    });
});

線上演示   原始碼下載


HTML5 3D愛心動畫 晚來的七夕禮物

這是一款用HTML5實現的3D動畫特效,愛心非常逼真。

線上演示   原始碼下載


jQuery可拖拽刪除小圖示回收站

核心jQuery程式碼:
$(function() {

    var folder = $("#main .folder"),
        front = folder.find('.front'),
        img = $("#main img"),
        droppedCount = 0;

    img.draggable();

    folder.droppable({
        drop : function(event, ui) {
            
            // Remove the dragged icon
            ui.draggable.remove();
            
            // update the counters
            front.text(++droppedCount);
            
        },
        
        activate : function(){
            // When the user starts draggin an icon
            folder.addClass('open');
        },
        
        deactivate : function(){
            // Close the folder
            folder.removeClass('open');
        }
    });
});


線上演示   原始碼下載

評論(2)

相關文章