以下是 jQuery网页动态场景插件jqfloat代码 的示例演示效果:
部分效果截图:
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网页动态场景插件jqfloat</title>
<link rel="stylesheet" href="style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jqfloat.min.js"></script>
<script>
$(document).ready(function() {
$('.cloud').each(function() {
$(this).jqFloat({
width:Math.floor(Math.random()*10)*10,
height:10,
speed:Math.floor(Math.random()*10)*100 + 500
});
});
$('#sun').jqFloat({
width:10,
height:50,
speed:1800
});
$('.butterfly').jqFloat({
width:400,
height:100,
speed:1500
});
$('#snail, #message').jqFloat('stop',{
width:5,
height:0,
speed:30
});
$('#snail, #message').hover(function() {
$(this).jqFloat('play');
}, function() {
$(this).jqFloat('stop');
});
var clicked = false;
//define balloon attribute
$('#balloon').jqFloat('stop',{
width:5,
height:30,
speed:1500,
minHeight:300
});
$('#balloon').on('click', function() {
clicked = !clicked;
if(clicked)
$(this).jqFloat('play');
else
$(this).jqFloat('stop');
});
});
</script>
</head>
<body>
<section id="wrapper">
<div id="sky">
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
<div id="cloud4" class="cloud"></div>
<div id="sun"></div>
</div>
<div id="ground">
<div id="snail"></div>
<div id="message">不要碰我! ! </div>
<div id="fly1" class="butterfly"></div>
<div id="fly2" class="butterfly"></div>
</div>
<div id="balloon"></div>
<div id="iefix"></div>
</section>
</body>
</html>
JS代码(jqfloat.min.js):
(function(e){
var t={
init:function(t){
return this.each(function(){
e(this).data("jSetting",e.extend({
}
,e.fn.jqFloat.defaults,t));
e(this).data("jDefined",true);
var n=e("<div/>").css({
width:e(this).outerWidth(true),height:e(this).outerHeight(true),"z-index":e(this).css("zIndex")}
);
if(e(this).css("position")=="absolute")n.css({
position:"absolute",top:e(this).position().top,left:e(this).position().left}
);
else n.css({
"float":e(this).css("float"),position:"relative"}
);
if((e(this).css("marginLeft")=="0px"||e(this).css("marginLeft")=="auto")&&e(this).position().left>0&&e(this).css("position")!="absolute"){
n.css({
marginLeft:e(this).position().left}
)}
e(this).wrap(n).css({
position:"absolute",top:0,left:0}
)}
)}
,update:function(t){
e(this).data("jSetting",e.extend({
}
,e.fn.jqFloat.defaults,t))}
,play:function(){
if(!e(this).data("jFloating")){
e(this).data("jFloating",true)}
n(this)}
,stop:function(){
this.data("jFloating",false)}
}
;
var n=function(t){
var r=e(t).data("jSetting");
var i=Math.floor(Math.random()*r.width)-r.width/2;
var s=Math.floor(Math.random()*r.height)-r.height/2-r.minHeight;
var o=Math.floor(Math.random()*r.speed)+r.speed/2;
e(t).stop().animate({
top:s,left:i}
,o,function(){
if(e(this).data("jFloating"))n(this);
else e(this).animate({
top:0,left:0}
,o/2)}
)}
;
e.fn.jqFloat=function(n,r){
var i=e(this);
if(t[n]){
if(i.data("jDefined")){
if(r&&typeof r==="object")t.update.apply(this,Array.prototype.slice.call(arguments,1))}
else t.init.apply(this,Array.prototype.slice.call(arguments,1));
t[n].apply(this)}
else if(typeof n==="object"||!n){
if(i.data("jDefined")){
if(n)t.update.apply(this,arguments)}
else t.init.apply(this,arguments);
t.play.apply(this)}
else e.error("Method "+n+" does not exist!");
return this}
;
e.fn.jqFloat.defaults={
width:100,height:100,speed:1e3,minHeight:0}
}
)(jQuery)CSS代码(style.css):
body{margin:0;padding:0;background:url(bg.jpg) repeat;font-family:Arial,Helvetica,sans-serif;overflow:hidden;}
header,section,footer{display:block;}
/* jqFloat.js */
#wrapper{width:100%;height:100%;}
#holder{width:600px;max-width:100%;height:auto;position:relative;background:#fff;border-radius:30px;border:5px solid #2e5594;margin:10% auto 0;padding:1em 3em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#holder h2{font-size:33px;font-style:italic;letter-spacing:2px;text-shadow:1px 1px 0px #fff,2px 1px 0 #999;font-family:Gill Sans MT,sans-serif;}
#holder h2 span{color:#DE390E;}
#holder p{line-height:150%;}
#holder pre{background:#f4f4f4;padding:10px 25px;}
#ground{height:100px;width:100%;position:absolute;bottom:0;left:0;background:url(sprite.png) repeat-x 0 bottom;z-index:7;}
.cloud{width:104px;height:66px;background:url(sprite.png) no-repeat 0 0;position:absolute;z-index:10;}
#cloud1{top:17%;left:22%;z-index:3;}
#cloud2{top:10%;left:50%;}
#cloud3{top:20%;right:17%;}
#cloud4{top:13%;right:12%;z-index:5;}
#sun{width:106px;height:105px;background:url(sprite.png) no-repeat 0 -120px;position:absolute;z-index:8;top:12%;right:15%;}
#snail{width:85px;height:71px;background:url(sprite.png) no-repeat 0 -240px;position:absolute;z-index:10;top:-22px;left:50%;}
#message{width:129px;height:63px;background:url(sprite.png) no-repeat -120px top;position:absolute;z-index:12;top:-100px;left:45%;font-size:12px;line-height:20px;padding:15px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.butterfly{width:35px;height:27px;background:url(sprite.png) no-repeat 0 -360px;position:absolute;z-index:20;}
#fly1{top:-40px;right:24%;}
#fly2{top:-30px;right:20%;}
#balloon{width:200px;height:515px;background:url(sprite.png) no-repeat -120px -120px;position:absolute;bottom:-200px;left:10%;z-index:5;}
#iefix{margin:0;border:0;padding:0;clear:both;float:none;font-size:1px;}
分享到QQ
分享到微博
微信扫一扫
