澳门新浦京娱乐游戏7款个性化jQuery/HTML5地图插件

本文由码农网 –
小峰原创,转发请看清文末的转发要求,应接参预大家的付费投稿计划!

jQuery特别刚劲,大家事情未发生前也用jQuery分享过比很多实用的插件。HTML5方可让网页变得愈加五颜六色,将HTML5和jQuery结合使用那将公布更棒的效果与利益。

1、CSS3/jQuery自定义弹出窗口 种种弹出动漫

前日大家日常会用到部分地图应用,无论是在网页上如故手提式无线电话机App中,地图貌似是叁个必得的行使。本文将教导大家齐声来探视一些基于jQuery和HTML5的天性化地图插件,有六款地图相比较实用,有个别则是装有抽象的定义,很有天性化。

前不久向大家搜集了一些关于HTML5和jQuery的利用及其源码,一同来看看。

那是风流罗曼蒂克款使用jQuery和CSS3达成的自定义弹出窗口,那可比浏览器暗中同意的弹出窗口能够多了。弹出窗口中能够自定义html,十一分眼疾手快。别的最重大的二个表征是,它采纳了jQuery和CSS3能够完结很各类弹出窗口动画效果,挺酷的。

1、HTML5社会风气地图 划分世界区域并彰显国家名

那是后生可畏款基于HTML5的世界地图应用,它的特点是能够将地图中的各国区域举行分割,鼠标滑过时就能够呈现该区域对应的国家名称,你也足以对弹出的竹签举行自定义文字和自定义样式。

澳门新浦京娱乐游戏 1

在线演示 
      源码下载

HTML5精气神的火苗焚烧动漫特效

那又是意气风发款基于HTML5的超炫动漫特效,是大器晚成款动感的火焰点火动漫效果。那款HTML5动漫火焰点火特别逼真。

核心jQuery代码:

澳门新浦京娱乐游戏 2澳门新浦京娱乐游戏 3

$( 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

澳门新浦京娱乐游戏 4

在线演示        源码下载

澳门新浦京娱乐游戏 5

2、jQuery矢量SVG地图插件JVectorMap

JVectorMap是生机勃勃款基于jQuery的矢量地图插件,它是基于SVG布局的,和此外jQuery地图插件区别的是,jVectorMap是矢量地图,不过它同样扶助地图缩放和地图平面移动等一呼百诺的功效。由于JVectorMap是依据jQuery的,所以扶持超越四分之二主流的浏览器,应用也一定平淡无奇。

澳门新浦京娱乐游戏 6

在线演示 
      源码下载

jQuery矢量SVG地图插件JVectorMap

JVectorMap是风流倜傥款基于jQuery的矢量地图插件,它是依据SVG构造的,和其余jQuery地图插件差别的是,jVectorMap是矢量地图。

核心jQuery代码:

澳门新浦京娱乐游戏 7澳门新浦京娱乐游戏 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

澳门新浦京娱乐游戏 9

在线演示        源码下载

澳门新浦京娱乐游戏,在线预览

3、jQuery中黄炎子孙民共和国地形图插件

几日前要来介绍朝气蓬勃款相对更实用些的jQuery中夏族民共和国地图插件,在该实例中,整张中夏族民共和国地形图都按梯次省份切割,鼠标滑过相应的省份时,就可以弹出相应省份的实际介绍。

澳门新浦京娱乐游戏 10

在线演示 
      源码下载

CSS3图片偏斜效果 可偏斜八个角度

澳门新浦京娱乐游戏 11

在线演示        源码下载

源码下载

4、纯CSS3得以完毕地图火热文字注脚提醒

那款地图应用的特征是地图上有大多评释点,点击注脚点就能够在页面上弹出三个文字提醒框,用来证实该申明点在地形图上的详细音讯。假设您须求有后生可畏款带标记效能的地图应用,那么那款CSS3地图插件能够满意你。

澳门新浦京娱乐游戏 12

在线演示 
      源码下载

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

jPaginate是风姿罗曼蒂克款基于jQuery的分页插件,那款jQuery分页插件有贰个特征,就是随着鼠标点击页码,页码会向前或向后滚动。

核心jQuery代码:

澳门新浦京娱乐游戏 13澳门新浦京娱乐游戏 14

$(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

澳门新浦京娱乐游戏 15

在线演示       源码下载

2、jQuery切合运动页面和PC页面的分页插件

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

前日要享用的那款HTML5地图应用是一张世(zhāng shì卡塔尔界地图,地图成分是应用SVG绘制的,而且地图能够拖拽和某个缩放,效果卓殊不错。

澳门新浦京娱乐游戏 16

在线演示 
      源码下载

jQuery宽屏游戏主旨图 Tab图片切换按键

款jQuery宗旨图是宽屏的,因而外观察起来格外大方。

核心jQuery代码:

澳门新浦京娱乐游戏 17澳门新浦京娱乐游戏 18

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

View Code

澳门新浦京娱乐游戏 19

在线演示        源码下载

前几天我们要为我们大饱眼福风华正茂款特别精良的jQuery分页插件,那款分页插件的外观挺经常的,它的二个最大特征是不单符合在PC页面上使用,更能够在活动网页上体贴入微应用。在活动网页版的分页插件能够拖动页面来翻页,效果特不利。

6、HTML5/CSS3带区域地图的联系表单

今天大家要来分享意气风发款功效更加强大的HTML5/CSS3联络表单,它能够选中不一样区域展现相应的地形图,然后针对该区域填写联系表单。

澳门新浦京娱乐游戏 20

在线演示 
   
  源码下载

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

这是意气风发款用HTML5实现的3D动画特效,爱心特别逼真。

澳门新浦京娱乐游戏 21

在线演示        源码下载

澳门新浦京娱乐游戏 22

7、HTML5 3D实景地图动漫 3D效果超级帅

明天大家来分享风华正茂款崭新的HTML5
3D效果,是生龙活虎款3D实景地图,那款3D地图截取了实处的屋宇大厦,何况能够旋转呈现,十分帅。

澳门新浦京娱乐游戏 23

在线演示 
      源码下载

如上就是有个别安然依旧的jQuery/HTML5地图插件,若是你也许有好的地图插件,招待跟大家享受。

jQuery可拖拽删除小Logo回收站

核心jQuery代码:

澳门新浦京娱乐游戏 24澳门新浦京娱乐游戏 25

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

View Code

澳门新浦京娱乐游戏 26

在线演示        源码下载


在线预览

源码下载

3、jQuery纵向滑块焦点图插件 图片切换通畅

明日大家要来分享风流罗曼蒂克款功效非常酷的jQuery焦点图,它的Tab切换形式是纵向的,并且图片切换的法子也是纵向的,别的全数jQuery主旨图的色彩非常棒,给人生机勃勃种神秘的感到。宗旨图的图片切换仍旧相比较流利的。

澳门新浦京娱乐游戏 27

在线预览

源码下载

4、HTML5颜色渐变3D文字特效

明日我们要享受后生可畏款HTML5
3D文字特效,文字的颜料是耳濡目染的,同期有文字阴影,越发展现了3D立体的效率。

澳门新浦京娱乐游戏 28

在线预览

源码下载

5、CSS3鼠标滑过图片放大特效

昨日大家要来分享大器晚成款轻松实用的CSS3鼠标滑过图片放大特效,大家得以将它利用在相册中,我们能够将鼠标移到图片上海展览中心开高效预览相片,你也得以扩张它,比方给图片加投影和边框等。整叁个图形放大特效依然相比较酷的。

澳门新浦京娱乐游戏 29

在线预览

源码下载

6、HTML5 Canvas模拟三角函数sin图像生成

不久前我们要分享风华正茂款利用HTML5
Canvas来模拟三角函数sin图像生成规律,极度直观。

澳门新浦京娱乐游戏 30

在线预览

源码下载

7、HTML5/CSS3动漫下拉菜单 子菜单相当酷

明天我们要来分享意气风发款作用很科学的CSS3下拉菜单,和任何的CSS3下拉菜单作用相符,也是鼠标滑过主菜单是下拉张开子菜单,同期子菜单实行的时候有不错的卡通效果,那款动漫应该叫做矩形打开动漫吧。

澳门新浦京娱乐游戏 31

在线预览

源码下载

8、HTML5/jQuery雷达动漫图表 图表配置不行简单

前几日我们再来分享生机勃勃款非常特别的HTML5图形,它是应用HTML5和jQuery的雷达动漫图表,图表数据在开首化的时候带有自然动漫。

澳门新浦京娱乐游戏 32

在线预览

源码下载

9、jQuery鼠标滑过文字跳动动画插件

此次大家世襲来为我们享用大器晚成款文字特效插件,那款文字特效比较轻松,当大家把鼠标滑过文字上方时,文字即会跳动起来,宛如跳舞一下。由于那款文字特效是用jQuery的,所以能相称全数主流的浏览器,大家能够尝尝一下。

澳门新浦京娱乐游戏 33

在线预览

源码下载

10、jQuery操作Tencent地图API 可证明地图地点

前天大家要来分享生龙活虎款jQuery地图插件,正确的说,它是利用了Tencent地图的API来促成的。咱们不但能够像使用百度地图和Google地图那样移动和缩放地图可视区域,也足以采纳要求固定的省区地区。最重大的是你能够在地图上阐明音信,保持后便于下二遍搜索。

澳门新浦京娱乐游戏 34

在线预览

源码下载

本文固定链接: 

发表评论

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