超炫酷的jQuery/HTML5应用效果及源码
浏览数：33 /
时间：2015年06月09日
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(); });
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‘); } }); });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
