一种许愿瓶效果

夏天之大

于 2014-09-09 11:34:53 发布

阅读量627

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u012922025/article/details/39154361

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<style>
body{
	color:#cccccc;
	background-color:#000;
	}
.bottle{
	margin:500px auto 0 auto;
	width:80px;
	height:144px;
    background:url(bottle.png) no-repeat;
	position:relative;
	}
</style>

<title>无标题文档</title>
</head>
 <div id="bottle" class="bottle"></div>
</body>
<div id="wish" class="wish">
    <span class="h1">写下您的祝福</span>
    <textarea id="text"class="text"></textarea>
    <a class="btn" href="javascript:subimit();">提交</a>
</div>
<script type="text/javascript">
function subimit(){
	var txt=$("#text").val();
    //alert(txt);	
	$.fn.fly.defaults.steams.push(txt);
	$("#text").val('');
	}
//随机组合若干字符
function randchar(length,chars){
	length=length || 1 ;
	var hash='';
	maxnum=chars.length-1;
	for(var i=0;i<length;i++){
		 num=rand(0,maxnum);
		 hash+=chars.slice(num,num+1);
		}
    return hash;
	};
//随机范围内取整
function rand(mi,ma){
	var range=ma-mi;
	var out=mi+Math.round(Math.random()*range);
	return parseInt(out);
	};
;(function($){
	
	$.extend( jQuery.easing ,{
		flyFastSlow: function (x, t, b, c, d) {
			return -c * ((t=t/d-1)*t*t*t  - 1) + b;
		}
	});

 $.fn.fly=function(option){
		var $fly=$(this);
		var opts = $.extend({},$.fn.fly.defaults,option);
		var flywidth=$fly.width();
		//alert($fly.width());		
		$fly.append('<div class="fly_star" style="position:absolute;overflow:hidden;z-index:0;left:-500px;top:-'+opts.steamTopMax+'px;height:'+opts.steamTopMax+'px;width:'+opts.streamrangeWidth+'px;"></div>');
		var $flybox=$fly.find('div.fly_star');	
		var flyboxwidth=$flybox.width();
		//alert(flyboxwidth);
		setInterval(function(){
			steam();
		}, rand( opts.makeSteamInterval / 2 , opts.makeSteamInterval * 2 ) );
		return $fly ;
	function steam(){	
			flyboxwidth = $flybox.width();		
			var fontSize = rand(12, opts.steamMaxSize  ) ;
			var xPos = rand(490,560);
			var rotate = rand(-5,5);
			var rotateStyle = ' -moz-transform:rotate('+rotate+'deg);-webkit-transform:rotate('+rotate+'deg);-o-transform:rotate('+rotate+'deg);transform:rotate('+rotate+'deg);';
			var color = '#'+ randchar(6,'0123456789ABCDEF' );
			//var color = 'red';
			var steamsFontFamily = randchar( 1, opts.steamsFontFamily );
			var html = '<span class="coffee-steam" style="position:absolute;left:'+xPos+'px;top: '+opts.steamTopMax+'px;font-size:'+fontSize+'px;color:'+ color +';font-family:'+steamsFontFamily +';'+rotateStyle+';-webkit-text-size-adjust:none;display:block; ">'+ randchar( 1, opts.steams ) +'</span>';			
			var $flyobj = $(html);
			var left = rand(0,1500);		
			//alert(fontSize+"位置:"+xPos+"颜色:"+color+"left:"+left);
			$flyobj.appendTo($flybox).animate({
				top		: rand( opts.steamTopMax / 2 , 0 ),
				left	: left  ,
				opacity	: 0
			} , rand( opts.SteamFlyTime / 2 , opts.SteamFlyTime * 1.2 ) , 'flyFastSlow' ,  function(){
				$flyobj.remove();
				$flyobj = null;		
				//alert(123);	
			});	
			
		};
		
 };
		
	$.fn.fly.defaults = {
		steams				: ['你的祝福'], 
		steamsFontFamily	: ['Verdana','Geneva','Comic Sans MS','MS Serif','Lucida Sans Unicode','Times New Roman','Trebuchet MS','Arial','Courier New','Georgia'],
		SteamFlyTime		: 10000 , /*Steam飞行的时间,单位 ms 。（决定steam飞行速度的快慢）*/
		makeSteamInterval	: 1000 , /*制造Steam时间间隔,单位 ms.*/
		steamMaxSize		: 50 ,/*制造蒸汽的大小*/
		steamTopMax			: 600,/*制造蒸汽的最大高度*/
		streamrangeWidth	: 1500 /*咖啡杯的手柄宽度*/
	};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
	  $('#bottle').fly();
	//var obj=randchar(1,"ab");
	//alert(obj);
});
</script>
</html>