鼠标点击文本框宽度缓冲增加效果
本章节分享一段代码实例它实现了，当鼠标点击文本框的时候，能够让文本框以缓冲的方式增加宽度，当鼠标来开的时候又能够恢复原来的长度，需要的朋友可以做一下参考，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>前端教程网</title>
<style>
#txt{
width:150px;
border:1px solid #ccc;
}
</style>
<script>
window.onload = function () {
function GetCurrentStyle(obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[prop];
}
return null;
}
function move(obj, prop, target) {
var dt = null;
var speed = 0;
var ol = 0;
dt = setInterval(function () {
ol = parseInt(GetCurrentStyle(obj, prop));
if (Math.abs(ol - target) < 1) {
obj.style[prop] = target + "px";
clearInterval(dt);
}
else {
speed = (target - ol) / 8;
speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
obj.style[prop] = ol + speed + "px";
}
}, 30);
}
var otxt = document.getElementById("txt");
otxt.onfocus = function () {
move(this,"width",250);
}
otxt.onblur = function () {
move(this, "width", 150);
}
}
</script>
</head>
<body>
<input type="text" id="txt"/>
<input type="button" id="bt" value="搜索"/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.相关阅读:
（1）.window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。
（2）.function GetCurrentStyle(obj, prop) {},此函数可以获取指定元素对象的指定属性值，很多朋友可能会认为为什么不使用style.prop的方式，因为这种方式只能够获取<div style="">这种方式定义的css样式属性值。第一个参数是元素对象，第二个参数是样式属性名称。
（3）.if (obj.currentStyle) {
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[prop];
}，上面的写法为了实现浏览器兼容性，更多关于他们的内容可以参阅相关阅读。
（4）.function move(obj, prop, target) {}，此方法实现了缓冲运动效果，第一个参数是元素对象，第二个参数是元素的样式属性值，第三个参数是目标值。
（5）.var dt = null，声明一个变量并且赋值为null，用来作为定时器函数的标识。
（6）.var speed = 0，用来存储数据变化的大小。
（7）.var ol = 0，用来存储获取的元素指定的样式属性值。
（8）.dt = setInterval(function () {},30)，每30毫秒执行一次指定的函数，也就实现了运动缓冲效果。
（9）.ol = parseInt(GetCurrentStyle(obj, prop))，获取元素的指定样式属性值并转换为整数。
（10）.if (Math.abs(ol - target) < 1) {
obj.style[prop] = target + "px";
clearInterval(dt);
}如果当前的值和目标值的差的绝对值小于1，那么就是说已经很接近目标值了。
那么就将元素的指定属性值直接设置为目标值。
并且停止定时器函数的执行。
（11）.else { speed = (target - ol) / 8;
speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
obj.style[prop] = ol + speed + "px";
}，如果之差没有小于1的话，就获取相应的速度值，并且设置元素的样式属性。
由于当前的值和目标值之差越来越小，那么速度就越来越慢，于是就实现了缓冲运动。
二.相关阅读:
1.window.onload=function(){}可以参阅window.onload用法详解一章节。
2.GetCurrentStyle()可以参阅js如何获取非内部取样式表中定义的属性值一章节。
3.setInterval()函数可以参阅setInterval()一章节。
4.parseInt()函数可以参阅JavaScript parseInt()一章节。
5.Math.ceil()函数可以参阅JavaScript Math.ceil()一章节。
6.Math.floor()函数可以参阅JavaScript Math.floor()一章节。