CSS：动态边框切换效果

其他 2019-03-07 20:14:05 阅读次数: 0

效果：

效果就是在切换时，边框跟随并且调整大小，必备CSS效果。

上代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>边框移动特效</title>
		<style type="text/css">
			#animate_border {
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 0;
				border: 1px solid #2CAAC9;
				box-shadow: 0 0 3px #0AF1F5;
			}
			
			input {
				margin: 5px;
			}
			
			input:nth-child(1) {
				width: 200px;
				height: 20px;
			}
			
			input:nth-child(2) {
				width: 300px;
				height: 30px;
			}
			
			input:nth-child(3) {
				width: 280px;
				height: 20px;
			}
			
			input:nth-child(4) {
				width: 100px;
				height: 20px;
			}
		</style>
		<script type="text/javascript" src="js/zQuery.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var inputs = document.getElementsByTagName('input'); //获取到输入框
				var animate_border = document.getElementById('animate_border'); //获取到div
				for(var i = 0; i < inputs.length; i++) {
					inputs[i].onfocus = function() {
						change_border_to(this);
					} //为输入框添加onfocus事件，将该对象作为参数传入变化函数
				}

				function change_border_to(obj) { //出入某个输入框
					var this_width = obj.offsetWidth; //获得该输入框的宽度
					var this_height = obj.offsetHeight; //获得该输入框的高度
					var this_left = obj.offsetLeft; //获得该输入框的左偏移值
					var this_top = obj.offsetTop; //获得该输入框的上偏移值
					move(animate_border, {
						width: [this_width],
						height: [this_height],
						left: [this_left],
						top: [this_top]
					}); //使用运动框架动态改变div样式
				}
			}
		</script>
	</head>

	<body>
		<form action="#">
			用户名<input type="text" /><br> 密码
			<input type="text" /><br> 短信验证码
			<input type="text" /><br> 验证码
			<input type="text" /><br>
			<input type="submit" value="提交" />
		</form>
		<div id="animate_border"></div>
	</body>

</html>

js代码

 function rgb_color(){//随机rgb色生成函数，返回值为rgb颜色字符串
 var r=parseInt(Math.random()*255);
 var g=parseInt(Math.random()*255);
 var b=parseInt(Math.random()*255);
 var newcolor="rgb("+r+","+g+","+b+")";
 return newcolor;
 }
 function rgba_color(){//随机rgba色生成函数，返回值为rgba颜色字符串
 var r=parseInt(Math.random()*255);
 var g=parseInt(Math.random()*255);
 var b=parseInt(Math.random()*255);
 var a=Math.random();
 var newcolor="rgba("+r+","+g+","+b+","+a+")";
 return newcolor;
 }
  function getbyclass(parent,classname){//通过类名获取元素函数，参数为父元素、类名，返回值为元素数组
  var result=new Array();
  var allclass=parent.getElementsByTagName('*');
  for (var i=0; i<allclass.length;i++ )
  {

   if(classname==allclass[i].className)
	   result.push(allclass[i]);
  }
  return result;
  }
function index(current, obj)
{ //获取元素索引值
	for (var i = 0; i < obj.length; i++)
	{ 
		if (obj[i] == current) 
		{ 
			return i; 
		} 
	} 
} 

function viewsize(attr)
{//获取可视区尺寸，参数为height|width
	switch(attr)
		{
			case 'height':return document.body.offsetHeight||document.documentElement.clientHeight;break;
			case 'width':return document.body.offsetWidth||document.documentElement.clientWidtht;break;
			default :return 0;break;
		}
}
/**************************************************运动框架*****************************************************/
  function css(obj, attr, value)
{
	var re=[];
	if(arguments.length==2)
	{
		if(attr=='opacity')
		{
			re.push(Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr])));
		}
		else if(attr=='rotate')
		{
						var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
						var matrixarray=transformstr.split(",");
						re.push(Math.ceil(Math.acos(matrixarray[3])/Math.PI*180));
		}
		else if (attr=='translate')//transform 2d转换中的translate
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			
			re.push(parseInt(matrixarray[4]));re.push(parseInt(matrixarray[5]));
		}else if (attr=='translateX')//transform 2d转换中的translateX
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			re.push((parseInt(matrixarray[4])));
		}else if (attr=='translateY')//transform 2d转换中的translateY
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			re.push((parseInt(matrixarray[5])));
		}
		else if (attr=='transform')//transform 2d matrix方法
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			re.push(parseInt(matrixarray[0].match(/-?\d+(\.\d+)?/g)[0]*10000));//提出数组第一个字符串中的数字
			re.push(parseInt(matrixarray[1].match(/-?\d+(\.\d+)?/g)[0]*10000));
			re.push(parseInt(matrixarray[2].match(/-?\d+(\.\d+)?/g)[0]*10000));
			re.push(parseInt(matrixarray[3].match(/-?\d+(\.\d+)?/g)[0]*10000));
			re.push(parseInt(matrixarray[4].match(/-?\d+(\.\d+)?/g)[0]*10000));
			re.push(parseInt(matrixarray[5].match(/-?\d+(\.\d+)?/g)[0]*10000));
//						console.log(parseInt(matrixarray[0].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
//							parseInt(matrixarray[1].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
//			parseInt(matrixarray[2].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
//			parseInt(matrixarray[3].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
//			parseInt(matrixarray[4].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
//			parseInt(matrixarray[5].match(/-?\d+(\.\d+)?/g)[0]*10000));
		}
		else
		{
			re.push(parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
		}
		return re;
	}
	else if(arguments.length==3)
		switch(attr)
		{
			case 'width':
			case 'height':
			case 'paddingLeft':
			case 'paddingTop':
			case 'paddingRight':
			case 'paddingBottom':
				value[0]=Math.max(value[0],0);
			case 'left':
			case 'top':
			case 'marginLeft':
			case 'marginTop':
			case 'marginRight':
			case 'marginBottom':
				obj.style[attr]=value[0]+'px';
				break;
			case 'opacity':
				obj.style.filter="alpha(opacity:"+value[0]+")";
				obj.style.opacity=value[0]/100;
				break;
			case 'rotate':
			obj.style.webkitTransform="rotate(" + value[0]+ "deg)";
			obj.style.msTransform="rotate(" + value[0]+ "deg)";
			obj.style.MozTransform="rotate(" + value[0] + "deg)";
			obj.style.OTransform="rotate(" + value[0]+ "deg)";
			obj.style.transform="rotate(" + value[0] + "deg)";
			break;
			case 'translate':
			obj.style.webkitTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.msTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.MozTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.OTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.transform="translate(" + value[0] + "px,"+value[1]+"px)";
			break;
			case 'translateX':obj.style.webkitTransform="translateX(" + value[0] + "px)";
			obj.style.msTransform="translateX(" + value[0] + "px)";
			obj.style.MozTransform="translateX(" + value[0] + "px)";
			obj.style.OTransform="translateX(" + value[0] + "px)";
			obj.style.transform="translateX(" + value[0] + "px)";
			break;
			case 'translateY':obj.style.webkitTransform="translateY(" + value[0] + "px)";
			obj.style.msTransform="translateY(" + value[0] + "px)";
			obj.style.MozTransform="translateY(" + value[0] + "px)";
			obj.style.OTransform="translateY(" + value[0] + "px)";
			obj.style.transform="translateY(" + value[0] + "px)";
			break;
			case 'transform':obj.style.webkitTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
			obj.style.msTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
			obj.style.MozTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
			obj.style.OTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
			obj.style.transform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")";
			break;
			default:
				obj.style[attr]=value[0];
		}
	
	return function (attr_in, value_in){css(obj, attr_in, value_in)};
}


function stop(obj)
{
	clearInterval(obj.timer);
}

function move(obj, oTarget, iType, fnCallBack, fnDuring)
{
	var fnMove=null;
	if(obj.timer)
	{
		clearInterval(obj.timer);
	}
	switch(iType)
	{
		case "buffer":
			fnMove=do_buffer_move;
			break;
		case "flex":
			fnMove=do_flex_move;
			break;
		default: 
			fnMove=do_buffer_move;
			break;
	}
	
	obj.timer=setInterval(function (){
		fnMove(obj, oTarget, fnCallBack, fnDuring);
	}, 30);
}

/*------------------------------------运动函数中的全局变量-------------------------------------------*/
var attr='';
var next=[];
var cur;
var stopBtn=false;
function do_buffer_move(obj, oTarget, fnCallBack, fnDuring)
{
	stopBtn=false;var count=0;
	if(!obj.speed)obj.speed={};//该对象的速度属性，包括多个属性值速度，如果未定义则定义
	for(attr in oTarget)
	{
		if(!obj.speed[attr]){obj.speed[attr]=[];}//该对象的某一属性的速度值，值为该属性的速度值的数组
		cur=css(obj, attr);
		if (attr=='transform')
		{
			for (var j=0;j<cur.length ;j++)
			{
				if(undefined==obj.speed[attr][j])obj.speed[attr][j]=0;//在该对象目前的属性中，若某一速度参数未定义，则定义
				var temp=parseInt(oTarget[attr][j]*10000);
				if(Math.abs(temp-cur[j])>1000)//由于小数的特殊性，无法保证两数一致，相差很小时忽略差距
				{
					obj.speed[attr][j]=(temp-cur[j])/5;
					obj.speed[attr][j]=obj.speed[attr][j]>0?Math.ceil(obj.speed[attr][j]):Math.floor(obj.speed[attr][j]);
					next[j]=(cur[j]+obj.speed[attr][j])/10000;
					//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
				}
				else{
					next[j]=parseInt(oTarget[attr][j]*10000)/10000;//已经到达目标的值保持
					count++;//记录以达到目标的个数
					//console.log(attr+"count"+count);
				}
			}
		}
		else{
				for (var j=0;j<cur.length ;j++)
				{
					if(undefined==obj.speed[attr][j])obj.speed[attr][j]=0;//在该对象目前的属性中，若某一速度参数未定义，则定义
					if(oTarget[attr][j]!=cur[j])
					{
						oTarget[attr][j]=parseInt(oTarget[attr][j]);
						obj.speed[attr][j]=(oTarget[attr][j]-cur[j])/5;
						obj.speed[attr][j]=obj.speed[attr][j]>0?Math.ceil(obj.speed[attr][j]):Math.floor(obj.speed[attr][j]);
						next[j]=cur[j]+obj.speed[attr][j];
						//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
					}
					else{
						next[j]=oTarget[attr][j];//已经到达目标的值保持
						count++;//记录以达到目标的个数
						//console.log(attr+"count"+count);
					}
				}
				}
				css(obj,attr,next);
		}
		var allattr=0;//所有属性计数器清零
		for(attr in oTarget)
		{
			for (var i=0;i<oTarget[attr].length; i++)
			{
				allattr++;//计算出所有属性个数
			}
		}
		//console.log(count+" "+allattr);//以达个数与总个数对比
		if(count==allattr){stopBtn=true;}//当所有属性都达到目标时停止开关打开
	
	if(fnDuring)fnDuring.call(obj);
	if(stopBtn)
	{
		obj.speed={};
		//console.log("本次运动完成");
		clearInterval(obj.timer);
		if(fnCallBack)fnCallBack.call(obj);
	}
}
function do_flex_move(obj, oTarget, fnCallBack, fnDuring)
{
	stopBtn=false;var count=0;//有关是否运动的变量
	if(!obj.speed)obj.speed={};//该对象的速度属性，包括多个属性值速度，如果未定义则定义
	for(attr in oTarget)
	{
		if(!obj.speed[attr]){obj.speed[attr]=[];}//该对象的某一属性的速度值，值为该属性的速度值的数组
		//console.log(obj.speed[attr]);
		cur=css(obj, attr);
		if (attr=='transform')
		{
			for (var j=0;j<cur.length ;j++)
			{		
				if(undefined==obj.speed[attr][j])obj.speed[attr][j]=1;//在该对象目前的属性中，若某一速度参数未定义，则定义
				var temp=parseInt(oTarget[attr][j]*10000);
				if(Math.abs(parseInt(obj.speed[attr][j]))!=0)
				{
					obj.speed[attr][j]+=(temp-cur[j])/5;
					obj.speed[attr][j]*=0.7;
					obj.speed[attr][j]=parseInt(obj.speed[attr][j]);
					next[j]=(cur[j]+obj.speed[attr][j])/10000;
					//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
				}
				else
				{
					next[j]=parseInt(oTarget[attr][j]*10000)/10000;//已经到达目标的值保持
					count++;//记录以达到目标的个数
					//console.log(attr+"count"+count);
				}
			}
		}else{
			for (var j=0;j<cur.length ;j++)
			{				
				if(undefined==obj.speed[attr][j])obj.speed[attr][j]=1;//在该对象目前的属性中，若某一速度参数未定义，则定义
				if(Math.abs(obj.speed[attr][j])!=0)
				{
					obj.speed[attr][j]+=(oTarget[attr][j]-cur[j])/5;
					obj.speed[attr][j]*=0.7;
					obj.speed[attr][j]=parseInt(obj.speed[attr][j]);
					next[j]=cur[j]+obj.speed[attr][j];
					//console.log(j+" attr "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
				}
				else
				{
					next[j]=oTarget[attr][j];//已经到达目标的值保持
					count++;//记录以达到目标的个数
					//console.log(attr+"count"+count);
				}
			}
		}
		css(obj,attr,next);
	}
	
	var allattr=0;//所有属性计数器清零
		for(attr in oTarget)
		{
			for (var i=0;i<oTarget[attr].length; i++)
			{
				allattr++;//计算出所有属性个数
			}
		}
		//console.log(count+" "+allattr);//以达个数与总个数对比
		if(count==allattr){stopBtn=true;}//当所有属性都达到目标时停止开关打开
	
	if(fnDuring)fnDuring.call(obj);
	if(stopBtn)
	{
		obj.speed={};
		//console.log("本次运动完成");
		clearInterval(obj.timer);
		if(fnCallBack)fnCallBack.call(obj);
	}
}


/**************************************************运动框架结束*****************************************************/

猜你喜欢

转载自blog.csdn.net/qq_42192693/article/details/87994404
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022