IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

超炫酷的jQuery/HTML5应用效果及源码

作者:html5tricks  发布日期:2014-08-20 21:27:59
  • 收藏本文    我要投稿
  • jQuery非常强大,我们之前也用jQuery分享过很多实用的插件。HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果。

    今天向大家收集了一些关于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();
    
    });

    html5-cool-fire-effect

    在线演示        源码下载

    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
                }
              }]
            }
          });
        })

    jquery-jvectormap

    在线演示        源码下载

    CSS3图片倾斜效果 可倾斜四个角度

    css3-image-tilt-effect

    在线演示        源码下载

    页码可滚动的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-jpaginate

    在线演示       源码下载

    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();
        });
    });

    jquery-full-slider

    在线演示        源码下载

    HTML5 3D爱心动画 晚来的七夕礼物

    这是一款用HTML5实现的3D动画特效,爱心非常逼真。

    html5-3d-heart-animation

    在线演示        源码下载

    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');
            }
        });
    });

    jquery-drag-delete-icon

    在线演示 http://www.html5tricks.com/demo/html5-3d-heart-animation/index.html
    源码下载 http://www.it165.net/uploadfile/files/2014/0820/jquery-drag-delete-icon.rar

Tag标签:源码  效果  
  • 专题推荐