JS运动特效之任意值添加运动的方法分析


Posted in Javascript onJanuary 24, 2018

本文实例讲述了JS运动特效之任意值添加运动的方法。分享给大家供大家参考,具体如下:

回顾一下上个例子JS实现多物体运动的方法:

JS运动特效之任意值添加运动的方法分析

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
          startMove(this,400);
         }
         liTags[i].onmouseout = function () {
          startMove(this,200);
         }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objWidth = parseInt(getStyle(obj,'width'));//因为是通过[]调用属性,所以width必须加单引号
        // var iSpeed = (iTarget -obj.offsetWidth)/10;
        // 因为objWidth存放的就是当前对象的宽,所以直接写objWidth而不是obj.objWidth
        var iSpeed = (iTarget -objWidth)/10;
          iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = objWidth+iSpeed+'px';
        }
      },30);
    }
</script>

如果此时需求有变化,让第2个li鼠标移入,高度变化,第三个li鼠标依然边框,第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数,分别把之前width变化改成height,borderWidht,和opacity透明度变化;但是这样显然浪费,可以把他们合并成一个函数,把变化的属性作为参数传进去就好了.

1. function startMove(obj,attr,iTarget) 函数里新增attr参数
2. 调用参数的方式:由obj.style.属性名 变成 obj.style[属性名]
3. 需要分别为每个li添加事件

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
        liTags[i].timer = null;// 给每个li都添加一个timer
        liTags[0].onmouseover = function () {
          startMove(this,'width',400);
        }
        liTags[0].onmouseout = function () {
          startMove(this,'width',200);
        }
        liTags[1].onmouseover = function () {
          startMove(this,'height',100);
        }
        liTags[1].onmouseout = function () {
          startMove(this,'height',50);
        }
        liTags[2].onmouseover = function () {
          startMove(this,'borderWidth',10);
        }
        liTags[2].onmouseout = function () {
          startMove(this,'borderWidth',2);
        }
        liTags[3].onmouseover = function () {
          startMove(this,'padding',10);
        }
        liTags[3].onmouseout = function () {
          startMove(this,'padding',0);
        }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,attr,iTarget) {//attr:把变化的属性最为参数传入
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objAttr = parseInt(getStyle(obj,attr));
        var iSpeed = (iTarget -objAttr)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objAttr == iTarget){
          clearInterval(obj.timer);
        }else{
          //obj.style.width = objWidth+iSpeed+'px';
          obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
        }
      },30);
    }
</script>

运行一下发现,改变宽,高,border都妥妥的,但是最后一个改变“透明度”没反应,是什么问题那??

首先opacity的值0.3一个小数,parseInt(getStyle(obj,attr)之后便变成0,还有最大的一个问题就是最后属性值设置的时候:obj.style[attr] =  objAttr+iSpeed+'px'; 显然opacity并没有px这个单位,所以需要对运动框架做进一步处理

需要判断一下,当接受的参数是“透明度”的时候,需要单独处理一下,把上面出问题的两个地方做一下处理

var objAttr = 0;
if(attr == "opacity"){
   // 由于计算机对 小数的处理有问题,这里用Math.round处理一下
   // objAttr = parseFloat(getStyle(obj,attr)*100);
  //objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
  objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
   objAttr = parseInt(getStyle(obj,attr));
}

如果不做处理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于计算机不能很精确的处理小数,会导致一些问题

JS运动特效之任意值添加运动的方法分析

用parseInt这种方法:objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以处理小数,但是经过测试在鼠标移出的时候,与原来状态有一点偏差

JS运动特效之任意值添加运动的方法分析

可以看出,当鼠标移出去的时候,opacity应该回到1,可结果却是0.94 ;所以个人推荐用Math.round四舍五入函数来处理这里的小数问题

JS运动特效之任意值添加运动的方法分析

做一下判断,下面也同样做判断

if(attr == "opacity"){
  obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
  obj.style.opacity = (objAttr+iSpeed)/100;
}else{
  //obj.style.width = objWidth+iSpeed+'px';
  obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}

完整代码:

HTML部分

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

css部分:

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      border: 2px solid #c00;
      background: lightblue;
    }
</style>

js部分

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
        liTags[i].timer = null;// 给每个li都添加一个timer
        liTags[0].onmouseover = function () {
          startMove(this,'width',400);
        }
        liTags[0].onmouseout = function () {
          startMove(this,'width',200);
        }
        liTags[1].onmouseover = function () {
          startMove(this,'height',100);
        }
        liTags[1].onmouseout = function () {
          startMove(this,'height',50);
        }
        liTags[2].onmouseover = function () {
          startMove(this,'borderWidth',10);
        }
        liTags[2].onmouseout = function () {
          startMove(this,'borderWidth',2);
        }
        liTags[3].onmouseover = function () {
          startMove(this,'opacity',30);
        }
        liTags[3].onmouseout = function () {
          startMove(this,'opacity',100);
        }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,attr,iTarget) {//attr:把变化的属性最为参数传入
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objAttr = 0;
        if(attr == "opacity"){
          // 由于计算机对 小数的处理有问题,这里用parseFloat转一下
          objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
           objAttr = parseInt(getStyle(obj,attr));
        }
        var iSpeed = (iTarget -objAttr)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objAttr == iTarget){
          clearInterval(obj.timer);
        }else{
          if(attr == "opacity"){
            obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
            obj.style.opacity = (objAttr+iSpeed)/100;
          }else{
            //obj.style.width = objWidth+iSpeed+'px';
            obj.style[attr] = objAttr+iSpeed+'px';
          }
        }
      },30);
    }
</script>

最后结果演示:

 JS运动特效之任意值添加运动的方法分析

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
Use Word to Search for Files
Jun 15 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 #Javascript
详解node child_process模块学习笔记
Jan 24 #Javascript
浅谈Node.js 子进程与应用场景
Jan 24 #Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 #Javascript
深入理解node.js http模块
Jan 24 #Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 #Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP pear安装配置教程
2016/05/14 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
网吧消防安全制度
2014/01/28 职场文书
草船借箭教学反思
2014/02/03 职场文书
师德演讲稿范文
2014/05/06 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
护士个人年终总结
2015/02/13 职场文书
英雄儿女观后感
2015/06/09 职场文书
六五普法学习心得体会
2016/01/21 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书