鼠标点击文本框宽度缓冲增加效果

快乐打工仔 分类:实例代码

本章节分享一段代码实例它实现了,当鼠标点击文本框的时候,能够让文本框以缓冲的方式增加宽度,当鼠标来开的时候又能够恢复原来的长度,需要的朋友可以做一下参考,代码实例如下:

<!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()一章节。

回复

我来回复
  • 暂无回复内容