jQuery射击飞行的鸟特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery射击飞行的鸟特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery射击飞行的鸟特效</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    
    
    <script type="text/javascript" src="js/jquery.path.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>
<div id="wrapper">
<!--================================bird=================================-->
    <a href="#" id="twitter">
        <span id="wing" class="up"></span>
        <div id="follow"></div>
        <span id="killer"></span>
    </a>
    <div id="preloader"></div>
    <div id="target"></div>
<!--===============================end bird=================================-->
</div>
<br>
</body>
</html>

JS代码(main.js):

$(window).load(function(){
	var $mind_blowing_shock = $("#chapter_1 .mind-blowing-shock span");
	// var $electrize = $(".electrize");
	var $cm_icons = $("#chapter_3 .cm-icon");
	var $ipad = $("#chapter_3 .ipad");
	var $cloud = $("#chapter_3 .cloud");
	var $vitamins = $("#chapter_1 .vitamins");
	var $vitamins_content = $("#chapter_1 .vitamins .vitamins-content");
	var $pacman = $("#chapter_4 .pacman");
	var $pacman_game = $("#chapter_4 .pacman .game");
	var $pacman_text = $("#chapter_4 .pacman .game-text") var $paper = $("#chapter_1 .paper");
	var $baloonize = $(".baloonize");
	$(window).scroll(function(){
	pos = $(this).scrollTop();
	/* MIND-BLOWING-SHOCK */
 if (Math.random() < 0.5){
	$mind_blowing_shock.css({
	"backgroundPosition":"left top"}
);
}
else{
	$mind_blowing_shock.css({
	"backgroundPosition":"left bottom"}
);
}
/* CM-ICON */
 $cm_icons.each(function(index,value){
	$element = $(this);
	switch (true){
	case (pos < ($element.data("start"))):$element.css({
	marginLeft:$element.data("offsetLeft"),marginTop:-100,'-moz-transform':'rotate(10deg)','-webkit-transform':'rotate(10deg)'}
);
	break;
	default:$element.css({
	marginLeft:0,marginTop:0,'-moz-transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)'}
);
}
}
);
	/* IPAD */
 switch (true){
	case (pos < ($ipad.data("start"))):$ipad.css({
	marginLeft:$ipad.data("offsetLeft"),marginTop:-100,'-moz-transform':'rotate(-10deg)','-webkit-transform':'rotate(-10deg)'}
);
	break;
	default:$ipad.css({
	marginLeft:0,marginTop:0,'-moz-transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)'}
);
}
/* CLOUD */
 switch (true){
	case (pos < ($cloud.data("start"))):$cloud.css({
	marginLeft:$cloud.data("offsetLeft"),marginTop:-100,'-moz-transform':'rotate(10deg)','-webkit-transform':'rotate(10deg)',opacity:0}
);
	break;
	default:$cloud.css({
	marginLeft:0,marginTop:0,'-moz-transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)',opacity:1}
);
}
// VITAMINS switch (true){
	case (pos < ($vitamins.data("start"))):$vitamins_content.css({
	height:0}
);
	break;
	default:$vitamins_content.css({
	height:$vitamins.data("height")}
);
	break;
}
// PAPER switch (true){
	case (pos < ($paper.data("start"))):$paper.css({
	'marginTop':0,'-moz-transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)'}
);
	break;
	default:$top = $paper.data("offset");
	$degree = $paper.data("degree");
	$paper.css({
	'marginTop':$top,'-moz-transform':'rotate('+$degree+'deg)','-webkit-transform':'rotate('+$degree+'deg)'}
);
	break;
}
// SECTIONS switch (true){
	case (pos < ($("#chapter_1").data("top"))):$("body").removeClass("end").removeClass("chapter_1").removeClass("chapter_2").removeClass("chapter_3").removeClass("chapter_4");
	break;
	case (pos < ($("#chapter_2").data("top"))):$("body").removeClass("end").removeClass("chapter_2").removeClass("chapter_3").removeClass("chapter_4").addClass("chapter_1");
	break;
	case (pos < ($("#chapter_3").data("top"))):$("body").removeClass("end").removeClass("chapter_1").removeClass("chapter_3").removeClass("chapter_4").addClass("chapter_2");
	break;
	case (pos < ($("#chapter_4").data("top"))):$("body").removeClass("end").removeClass("chapter_1").removeClass("chapter_2").removeClass("chapter_4").addClass("chapter_3");
	break;
	default:$("body").removeClass("chapter_1").removeClass("chapter_2").removeClass("chapter_3").removeClass("chapter_4").addClass("chapter_4");
}
$baloonize.each(function(index,value){
	$element = $(this);
	switch (true){
	case (pos < ($element.data("start"))):$top = $element.data("start_y") + ($element.data("length")/2);
	$element.css({
	"top":$top}
);
	break;
	default:$top = $element.data("start_y") + (($element.data("length")/2)*-1);
	$element.css({
	"top":$top}
);
}
}
);
}
);
}
);
	function init_scrolls(){
	w_height = $(window).height();
	h_height = $("#header").height();
	center_screen = (w_height+h_height)/2;
	$(".section").css("minHeight",w_height);
	/* SECTIONS */
 $(".section").each(function(){
	$(this).data("top",$(this).offset().top-65);
}
);
}
function ease(t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
function easeOut(t,b,c,d){
	return -c *(t/=d)*(t-2) + b;
}
var cache ={
}
,playerNext;
	$(function (){
	$("form").each(function (){
	this.reset()}
);
	$.cleared();
	$(".cleared2").each(function (){
	$(this).cleared2()}
);
	$("#preloader").ajaxStart(function (){
	$(this).show()}
).ajaxStop(function (){
	$(this).hide()}
);
	$("#top").click(function (){
	$("html,body").animate({
	scrollTop:0}
,400);
	return false}
);
	$(window).load(function (){
	$("#twitter").twitter();
}
);
	$.about = 0;
	$.music = 0}
);
	$.extend({
	log:function (a){
	if (window.console && window.console.log){
	console.log(a)}
}
,cleared:function (){
	$(".cleared").live("focus",function (){
	var a = $(this);
	if (!a.attr("val")){
	a.attr("val",a.val())}
if (a.val() == a.attr("val")){
	a.val("")}
a.addClass("focused")}
).live("blur",function (){
	var a = $(this);
	if (!a.val()){
	a.val(a.attr("val"));
	a.removeClass("focused")}
}
)}
}
);
	$.fn.extend({
	cleared2:function (){
	var b = $(this),a = $("span:first",b),c = $("input:first",b);
	a.click(function (){
	a.fadeOut("fast");
	c.focus()}
);
	c.focus(function (){
	a.fadeOut("fast")}
).blur(function (){
	if (!c.val()){
	a.fadeIn("fast")}
}
)}
,dragDrop:function (d){
	var c = $(this),b = null,a = 0,e = 0;
	c.mousedown(function (f){
	b = c;
	a = (parseInt(b.css("left")) || 0) - f.pageX;
	e = (parseInt(b.css("top")) || 0) - f.pageY;
	return false}
);
	$(document).mousemove(function (f){
	if (b){
	if (d.x){
	b.css("left",f.pageX + a)}
if (d.y){
	b.css("top",f.pageY + e)}
if (d.move){
	d.move(f.pageX + a,f.pageY + e)}
return false}
}
).mouseup(function (f){
	if (b){
	a += f.pageX;
	e += f.pageY;
	if (d.up){
	d.up(a,e)}
b = null;
	return false}
}
)}
}
);
	$.fn.extend({
	twitter:function (){
	var g = $(this),d = 0,p = 0,n = $("#wing"),s = $("#target"),e = 0,a = $("#follow"),i,r,m = [],c = [7,1,3,1,5,1,4,1],l = false,q = 0;
	var b = function (){
	i = $(document).width() / 10;
	r = $(window).height(600) / 10;
	m = [ [{
	center:[i * 6,- 120],radius:[i * 5,160],start:90,end:0,dir:-1}
,1500,1,1],[{
	center:[-i,80],radius:[i * 7,r * 2],start:90,end:0,dir:-1}
,1500,1,0],[{
	center:[i,0],radius:[i * 2,150],start:270,end:360,dir:0}
,1200,0,0],[{
	center:[i,- 80],radius:[i * 3,250],start:0,end:90,dir:1}
,1200,0,0],[{
	center:[i * 11,r * 6],radius:[i * 2,r],start:0,end:270,dir:-1}
,1200,1,0],[{
	center:[i * 9,r * 4],radius:[i * 10,r * 2],start:0,end:270,dir:-1}
,1500,1,0],[{
	center:[i * 0.5,r * 7],radius:[i * 2,r],start:270,end:360,dir:1}
,1200,0,0],[{
	center:[i * 0.5,r * 5],radius:[i * 10,r * 3],start:0,end:90,dir:1}
,1500,0,0],]}
,x = function (){
	p++;
	if (p == c[d]){
	d++;
	d = d < m.length ? d:0;
	f();
	u(d)}
else{
	var h = 20 + Math.round(Math.random() * 20),j = h * 40;
	g.animate({
	top:["+=" + h + "px","easeInOutSine"]}
,j).animate({
	top:["-=" + h + "px","easeInOutSine"]}
,j,x)}
}
,u = function (h){
	p = 0;
	g.attr("class",m[h][2] ? "rev":"").animate({
	path:new $.path.arc(m[h][0])}
,m[h][1],function (){
	x();
	if (m[h][3]){
	o()}
}
)}
,k = function (){
	e = !e;
	n.attr("class",e ? "up":"down")}
,o = function (h){
	a.stop().fadeIn(300)}
,f = function (h){
	a.stop().fadeOut(300)}
;
	$(window).resize(b);
	b();
	var t = setInterval(k,50);
	u(0);
	setTimeout(function (){
	s.fadeIn(300)}
,2000);
	s.mouseover(function (h){
	l = true;
	s.css({
	left:h.pageX,top:h.pageY,marginLeft:-20,marginTop:-37}
)}
);
	$(document).mousemove(function (h){
	if (l){
	s.css({
	left:h.pageX,top:h.pageY}
).attr("class",v(h,g) ? "hover":"")}
}
).click(function (h){
	if (l){
	l = false;
	if (v(h,g)){
	g.stop(true,false);
	f();
	clearTimeout(t);
	n.attr("class","up");
	g.animate({
	rotate:180,top:"-=40px"}
,400).animate({
	top:[$("#wrapper").height() - g.height() + 10,"easeOutBounce"]}
,1200,function (){
	g.css("top","auto").addClass("corpse")}
);
	s.fadeOut(200);
	return false}
s.fadeOut(500,function (){
	s.css({
	left:"68%",top:70,marginLeft:0,marginTop:0}
).fadeIn(200)}
);
	return false}
}
);
	var v = function (E,C){
	var A = parseInt(C.css("left")),B = parseInt(C.css("top")),z = C.width(),D = C.height(),j = E.pageX,F = E.pageY - 15;
	return j > A && j < A + z && F > B && F < B + D}
}
,cling:function (d,c,a,b){
	$(this).each(function (j,e){
	var x = $(e),u = 0,m = 0,s = 0,q = 0,g = a || "left",o = b || "top",f = parseInt(x.css(g)),v = parseInt(x.css(o)),p = false,n,k,r = function (i,h){
	return i > 0 ? Math.pow(i,h):-Math.pow(-i,h)}
;
	x.hover(function (h){
	clearTimeout(n);
	clearTimeout(k);
	x.stop(0,1);
	n = setTimeout(function (){
	p = true}
,10);
	u = x.width() / 2;
	m = x.height() / 2;
	s = h.pageX - (h.offsetX || h.layerX) + u;
	q = h.pageY - (h.offsetY || h.layerY) + m;
	kw = d ? (d[0] - u) / d[1]:0.2;
	kh = c ? (c[0] - m) / c[1]:0.2}
,function (){
	clearTimeout(n);
	clearTimeout(k);
	k = setTimeout(function (){
	p = false;
	var h ={
}
;
	h[g] = [f,"easeOutElastic"];
	h[o] = [v,"easeOutElastic"];
	x.animate(h,500)}
,100)}
).mousemove(function (i){
	if (p){
	var h ={
}
;
	h[g] = f + r(i.pageX - s,kw);
	h[o] = v + r(i.pageY - q,kh);
	x.css(h)}
return false}
)}
)}
,sway:function (){
	var a = $(this);
	$(this).animate({
	path:new $.path.arc2(a.data("arc"))}
,4000 + Math.random() * 2000,"linear",a.sway)}
,movedPopup:function (){
	var f = $(this),d = $("img",f),h = $(window),c = [f.width() - 20,f.height() - 20],b = [d.width(),d.height()],e = c[0] - b[0],a = c[1] - b[1];
	if (e > 0){
	d.css("left",e / 2)}
if (a > 0){
	d.css("top",a / 2)}
h.resize(function (){
	c = [f.width() - 20,f.height() - 20];
	e = c[0] - b[0];
	a = c[1] - b[1];
	if (e > 0){
	d.css("left",e / 2)}
if (a > 0){
	d.css("top",a / 2)}
}
).mousemove(function (g){
	if (e < 0){
	d.css("left",(g.pageX - h.scrollLeft()) / c[0] * e + 10)}
if (a < 0){
	d.css("top",(g.pageY - h.scrollTop()) / c[1] * a + 10)}
}
)}
,stereo:function (){
	var c = $(this),a = $("img:eq(1)",c),b = $(".hint",c);
	a.css({
	display:"block",opacity:"0"}
);
	c.dragDrop({
	x:1,y:0,move:function (d,g){
	d = Math.abs(d);
	var f = d % 200,e = Math.floor(d / 200) % 2,d = e ? (200 - f) / 200:f / 200;
	a.animate({
	opacity:d}
,10);
	b.fadeOut(200)}
,up:function (d,e){
	a.stop().animate({
	opacity:0}
,400);
	c.animate({
	left:0}
,400)}
}
)}
}
);

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body{font-size:62.5%;line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
button::-moz-focus-inner{padding:0;border:none;}
button{width:auto;overflow:visible;}
a{text-decoration:none;color:#CF4A30;}

CSS代码(style.css):

@import url("reset.css");body{background:url(../img/bg_green.jpg) repeat left top;}
.cb{clear:both;}
.fl{float:left;}
.fr{float:right;}
#wrapper{overflow:hidden;position:relative;height:800px;}
/*bird*/
#target{background:url("../img/target.png") no-repeat scroll 0 0 transparent;display:none;height:49px;left:68%;overflow:hidden;position:absolute;top:70px;width:49px;z-index:10001;}
#target.hover{background-position:0 -49px;}
#twitter{position:absolute;left:-100px;top:100px;z-index:10000;width:80px;height:41px;background:url(../img/twitter.png) no-repeat 0 0;}
#twitter.rev{top:170px;background:url(../img/twitter.png) no-repeat 0 -41px;}
#twitter.corpse{bottom:-40px !important;top:auto !important;}
#wing{display:none;position:absolute;left:26px;top:0px;width:15px;height:31px;background:url(../img/twitter.png) no-repeat;}
#wing.up{display:block;background-position:-4px -132px!important;}
#wing.down{display:block;background-position:-62px -132px!important;}
#follow{display:none;position:absolute;left:63px;top:15px;width:80px;height:15px;overflow:hidden;background:url(../img/twitter.png) no-repeat 0 -90px;}
.rev #wing{left:38px;}
.rev #wing.up{background-position:-41px -132px!important;}
.rev #wing.down{background-position:-24px -132px!important;}
.rev #follow{left:-65px;top:17px;background-position:0px -111px!important;}

附件:下载该文件资源,减少时间成本(增值服务)