鼠标点击种植爱心动画效果代码

代码语言:html

所属分类:动画

代码描述:鼠标点击种植爱心动画效果代码

代码标签: 爱心 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    html{height:100%;overflow:hidden;}
body{margin:0;height:100%; background:#7a4b94; cursor:pointer;}
h1 { margin:0; height:50px; background:#333; line-height:50px; position:relative; z-index:999; filter:alpha(opacity:80); opacity:0.8;}
h1 strong { color:#fff; font-family:arial; font-size:18px; position:absolute; top:0px; left:4%; }
a { position:absolute; top:0px; right:20px; color:#fff; margin-right:50px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; }
a:hover { text-decoration:underline; }
h2{ margin:0; width:96%; padding:10px 0 14px 4%; background:#333; position:absolute; bottom:0; left:0; z-index:999; filter:alpha(opacity:80); opacity:0.8; color:#fff; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2 strong { font-size:14px; }
</style>
</head>

<body>
    <h1>
        点击鼠标试试
    </h1>
    
    <script >
        function toBrowser()
{
	var browser=navigator.appName;
	var b_version=navigator.appVersion;
	if(browser=="Netscape")
	{
		return true;
	}
	var version=b_version.split(";");
	var trim_Version=version[1].replace(/[ ]/g,"");
	
	if(browser=="Microsoft Internet Explorer" &&( trim_Version=="MSIE7.0" || trim_Version=="MSIE6.0" || trim_Version=="MSIE8.0"))
	{
		return false;
	}
	else
	{
		return true;
	}
}
function starMove(obj,target,iType,fnEnd,iDate)
{
	if(obj.timer)
	{
		clearInterval(obj.timer);
	}
	if(iType==1)
	{
		var sAttr="";
		obj.iSpeed={};
		for( sAttr in  target)
		{
			obj.iSpeed[sAttr]=0;
		}
	}
	if(target["transform"])
	{
		if(obj["transform"])
		{
			target["transform"]+=obj["transform"];
		}
		else
		{
			css(obj,sAttr,0);
		}
	}
	switch(iType)
	{
		case 0:
		obj.timer=setInterval(function(){doMoveBuffer(obj,target,fnEnd);},24);
		break;
		case 1:
		obj.timer=setInterval(function(){domoveFlexible(obj,target,fnEnd);},24);
		break;
	}
}
function doMoveBuffer(obj,target,fnEnd)
{
	var sAttr="";
	var iEnd=1;
	for(sAttr in target)
	{
		if(toBrowser()==false && target["transform"])
		{
			continue;
		}
		var iNow=parseFloat(css(obj,sAttr));
		if(iNow==target[sAttr])
		{
			continue;
		}
		else
		{
			var iSpeed=(target[sAttr]-iNow)/5;
				iSpeed*=0.75;
			if(iSpeed>0)
			{
				iSpeed=Math.ceil(iSpeed);
			}
			else
			{
				iSpeed=Math.floor(iSpeed);
			}
			css(obj,sAttr,iNow+=iSpeed);
			iEnd=0;
		}
	}
	if(iEnd)
	{
		clearInterval(obj.timer);
		if(fnEnd)
		{
			fnEnd.call(obj);
		}
	}
}

function domoveFlexible(obj,target,fnEnd)
{
	var sAttr="";
	var iEnd=1;
	
	for( sAttr in target)
	{
		if(toBrowser()==false && target["transform"])
		{
			continue;
		}
		var iNow=parseFloat(css(obj,sAttr));
		obj.iSpeed[sAttr]+=(target[sAttr]-iNow)/5;
		obj.iSpeed[sAttr]*=0.83;
		if(Math.round(iNow)==target[sAttr] && Math.abs(obj.iSpeed[sAttr])<1)
		{
			continue;
		}
		else
		{	
			iNow=Math.round(iNow+obj.iSpeed[sAttr]);
			css(obj,sAttr,iNow);
			iEnd=0;
		}
	}
	if(iEnd)
	{
		clearInterval(obj.timer);
		if(fnEnd)
		{
			fnEnd.call(obj);
		}
	}
}
function css(obj, attr, value)
{
	if(arguments.length==2)
	{
		if(attr=="transform")
		{
			return obj.transform;
		}
		var i=parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
		var val=i?i:0;
		if(attr=="opacity")
		{
			val*=100;
		}
		return val;
	}
	else if(arguments.length==3)
	{
		switch(attr)
		{
			case 'width':
			case 'height':
			case 'paddingLeft':
			case 'paddingTop':
			case 'paddingRight':
			case 'paddingBottom':
				value=Math.max(value,0);
			case 'left':
			case 'top':
			case 'marginLeft':
			case 'marginTop':
			case 'marginRight':
			case 'marginBottom':
				obj.style[attr]=value+'px';
				bre.........完整代码请登录后点击上方下载按钮下载查看

网友评论0