jQuery爱心拉近拉远动画背景特效代码

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

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

以下是 jQuery爱心拉近拉远动画背景特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery爱心拉近拉远动画背景特效</title>

<link rel="stylesheet" type="text/css" href="JoynBackground.css"/>
<style>
#zhushi{ background-image: url(del.png); text-align: center; margin: 300px auto; padding: 20px; width: 60%; border-radius: 30px; }
</style>

<script src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="JoynBackground.js"></script>
<script>
$(document).ready(function(){
	JoynBackground(2,10000); //场景动画类型和时间
	/* 场景动画类型：【1】拉近【2】拉远【3】幻灯片显示 */
})
</script>

</head>
<body>
<!-- 背景[就这么简单] -->
<div id="JoynBackground">
	<img src="1.jpg" name="1"/>
    <img src="2.jpg" name="2"/>
    <img src="3.jpg" name="3"/>
</div>
<!-- 背景 -->

</body>
</html>

JS代码(JoynBackground.js):

function JoynBackground($move,$sudu){
	var $img_num=$('#JoynBackground').children('img').length;
	var $img_show=1;
	switch($move){
	case 1:$("#JoynBackground img").css({
	width:"120%",height:"120%",top:"-10%",left:"-10%"}
);
	$("#JoynBackground img[name='1']").css({
	display:"block"}
).animate({
	width:"100%",height:"100%",top:"0",left:"0"}
,$sudu-1000);
	setInterval(function(){
	$("#JoynBackground img[name='"+$img_show+"']").fadeOut(100);
	$img_show++;
	$img_show=$img_show>$img_num?'1':$img_show;
	$("#JoynBackground img[name='"+$img_show+"']").css({
	width:"120%",height:"120%",top:"-10%",left:"-10%"}
).fadeIn(1000).animate({
	width:"100%",height:"100%",top:"0",left:"0"}
,$sudu-1000);
}
,$sudu);
	break;
	case 2:$("#JoynBackground img[name='1']").css({
	display:"block"}
).animate({
	width:"120%",height:"120%",top:"-10%",left:"-10%"}
,$sudu-1000);
	setInterval(function(){
	$("#JoynBackground img[name='"+$img_show+"']").fadeOut(100);
	$img_show++;
	$img_show=$img_show>$img_num?'1':$img_show;
	$("#JoynBackground img[name='"+$img_show+"']").css({
	width:"100%",height:"100%",top:"0%",left:"0%"}
).fadeIn(1000).animate({
	width:"120%",height:"120%",top:"-10%",left:"-10%"}
,$sudu-1000);
}
,$sudu);
	break;
	case 3:$("#JoynBackground img[name='1']").css({
	display:"block"}
);
	setInterval(function(){
	$("#JoynBackground img[name='"+$img_show+"']").fadeOut($sudu);
	$img_show++;
	$img_show=$img_show>$img_num?'1':$img_show;
	$("#JoynBackground img[name='"+$img_show+"']").fadeIn($sudu);
}
,$sudu);
	break;
}
}

CSS代码(JoynBackground.css):

*{margin:0px;padding:0px;}
body{overflow:-Scroll;overflow:hidden;}
#JoynBackground{width:100%;height:100%;z-index:-999;position:absolute;top:0px;left:0px;}
#JoynBackground img{width:100%;height:100%;display:none;position:absolute;}
#login{background:#FFF;width:300px;height:300px;position:absolute;top:200px;left:200px;}

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