js 动画1

发布时间:2017-7-1 11:35:05编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"js 动画1 ",主要涉及到js 动画1 方面的内容,对于js 动画1 感兴趣的同学可以参考一下。

div速度 运动:

代码例如以下:

<!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>速度 运动</title><style>body{paddiing:0;margin:0}#div1{width:200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}#div1 span{width:20px;height:50px; background-color:blue;position:absolute; left:200px; top:75px}</style><script>window.onload = function(){	var oDiv = document.getElementById('div1');	oDiv.onmouseout = function(){		startMove(-200);	}	oDiv.onmouseover = function(){		startMove(0);	}}var timer = null;function startMove(seat){	clearInterval(timer);	var oDiv = document.getElementById('div1');	timer = setInterval(function(){		if(oDiv.offsetLeft > seat){			speed = -10;		}		else{			speed = 10;		}		if(oDiv.offsetLeft == seat){			clearInterval(timer)		}		else{			oDiv.style.left = oDiv.offsetLeft + speed +'px';		}	},30)		}</script></head><body><div id="div1"><span id="share">分享</span></div></body></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>透明度运动</title><style>body{	padding:0;	margin:0}#div1{	width:200px;	height:200px;	background:red;	filter:alpha(opacity:30);	opacity:0.3;}</style><script>window.onload = function(){	var oDiv = document.getElementById('div1');	oDiv.onmouseover = function(){		startMove(100);	}	oDiv.onmouseout = function(){		startMove(30);	}}var timer = null;var alpha = 30;function startMove(seat){	clearInterval(timer);	var oDiv = document.getElementById('div1');	timer = setInterval(function(){		if(alpha > seat){			speed = -10;		}		else{			speed = 10;		}		if(alpha == seat){			clearInterval(timer);		}		else{			alpha += speed;			oDiv.style.filter = 'alpha(opacity:'+alpha+')';			oDiv.style.opacity = alpha/100;		}	},30)}</script></head><body><div id="div1"></div></body></html>



上一篇:多类继承情况下适应变化设计一例
下一篇:[LeetCode] Restore IP Addresses 复原IP地址

相关文章

关键词: js 动画1

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款