JavaScript实战(原生range和自定义特效)简单实例

今天我又码了两个特效：一个是用原生input[type=range]的，另一个完全自定义的；下面是完整代码和演示：

  
  
  
  


  

    

      
        50
      
      
    
    

      
      
        50
      
      
    
    按住按钮0.5秒, 会持续变化!
  

第一个的实现很简单，就不做解释了，自己看代码；

这里主要介绍第二个实例的实现：

在我们看到一个需求，或者别人的特效时，不急着去看别人的代码，先想想，要是你，该怎么实现？先把思路整理出来

该特效的实现原理：

1. 一个span内嵌套一个span；

•外面的span：只显示宽、高、边框，背景无

•里面的span：高度和外面一样，宽度为默认的50%，先设置好背景颜色为线性渐变

2. 按钮的onclick事件比较简单，点一下，就改变里面的span的宽度和显示数字

3. 当按钮的onmousedown时，启动计时器，等500ms后执行函数change函数，而change函数是一个用setTimeout回调自身的函数，他会没16.7ms回调一次，达到动画效果

难点解析：

1. 这一句 var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;

用来获得初始值，如果你用outer2.style.width

是得不到值得，当然你也可以将a设个固定值，比如这里可以设为

var a = 1.3，

注意IE9以下不支持getComputedStyle方法，

IE的Element对象有currentStyle属性；

2. 这一句

btn1.onmouseup = function(){clearTimeout(id1);

clearTimeout(id)};

很关键，没了它，在onclick触发之前，会先触发onmosedown，在500ms后，开始执行，之后一直执行外层的计时器；

3. 其它的都不是难点；

这个实例其实扩展到其它很多应用，比如可以把中间的显示部分替换为文章、图片等等，再把按钮换成自定义的，效果将会很酷的！

如果您觉得我有写的不好的地方，欢迎指出！

以上这篇JavaScript实战(原生range和自定义特效)简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持全福编程网。