今天向大家收集了一些關於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)