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

澳门新葡亰赌995577 14

现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用。本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有抽象的概念,很有个性化。

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

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

澳门新葡亰赌995577 1

在线演示        源码下载

7、HTML5 3D实景地图动画 3D效果很酷

今天我们来分享一款全新的澳门新葡亰赌995577,HTML5
3D效果,是一款3D实景地图,这款3D地图截取了实景的房屋大厦,并且可以旋转展示,非常酷。

澳门新葡亰赌995577 2

在线演示 
      源码下载

以上就是一些精美的jQuery/HTML5地图插件,如果你也有好的地图插件,欢迎跟我们分享。

HTML5动感的火焰燃烧动画特效

这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真。

核心jQuery代码:

澳门新葡亰赌995577 3澳门新葡亰赌995577 4

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

View Code

澳门新葡亰赌995577 5

在线演示        源码下载

3、jQuery中国地图插件

今天要来介绍一款相对更实用些的jQuery中国地图插件,在该实例中,整张中国地图都按各个省份切割,鼠标滑过相应的省份时,即可弹出对应省份的具体介绍。

澳门新葡亰赌995577 6

在线演示 
      源码下载

jQuery矢量SVG地图插件JVectorMap

JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图。

核心jQuery代码:

澳门新葡亰赌995577 7澳门新葡亰赌995577 8

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

View Code

澳门新葡亰赌995577 9

在线演示        源码下载

1、HTML5世界地图 划分世界区域并显示国家名

这是一款基于HTML5的世界地图应用,它的特点是可以将地图中的各个国家区域进行划分,鼠标滑过时即可显示该区域对应的国家名称,你也可以对弹出的标签进行自定义文字和自定义样式。

澳门新葡亰赌995577 10

在线演示 
      源码下载

页码可滚动的jQuery分页插件jPaginate

jPaginate是一款基于jQuery的分页插件,这款jQuery分页插件有一个特点,就是随着鼠标点击页码,页码会向前或向后滚动。

核心jQuery代码:

澳门新葡亰赌995577 11澳门新葡亰赌995577 12

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

View Code

澳门新葡亰赌995577 13

在线演示       源码下载

5、HTML5 SVG世界地图 地图可拖拽和缩放

今天要分享的这款HTML5地图应用是一张世界地图,地图元素是使用SVG绘制的,并且地图可以拖拽和局部缩放,效果非常不错。

澳门新葡亰赌995577 14

在线演示 
      源码下载

今天向大家收集了一些关于HTML5和jQuery的应用及其源码,一起来看看。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图