通过学习，我发现当同一个ul下的li标签如果想要不同的效果，那怎么办？

比如第一个li是width变化，第二个li为透明度(opacity)变化，而opacity的值和width的值类型不同，不能通用那怎么办？

而设置两个函数，只为了，两个值变化就显得太过麻烦，通过学习，我发现可以通过一些方法来实现

代码如下

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         li {

             list-style: none;

             width: 200px;

             height: 100px;

             margin: 10px;

             background: pink;

             border: 1px solid blue;

             filter: alpha(opacity: 30);

             opacity: 0.3;

         }

     </style>

 </head>

 <body>

     <ul id="show">

         <li id="btn1"></li>

         <li id="btn2"></li>

     </ul>

 </body>

 </html>

js部分用了一些新的方法，可以看注释，还不清楚可以自行百度

 <script type="text/javascript">

         function $(id) {

             return typeof id === "string" ? document.getElementById(id) : id;

         }

         window.onload = function() {

             var btn1 = $("btn1");

             var btn2 = $("btn2");

             var speed = 0;

             btn1.onmouseenter = function() {

                 changeBtn(this, 'width', 400);

             }

             btn1.onmouseleave = function() {

                 changeBtn(this, 'width', 200);

             }

             btn2.onmouseenter = function() {

                 changeBtn(this, 'opacity', 100);

             }

             btn2.onmouseleave = function() {

                 changeBtn(this, 'opacity', 30);

             }

             //obj为当前的鼠标所指向的标签

             //stChg为对应的变量样式

             //chgWid为需要改变的值

             function changeBtn(obj, stChg, chgWid) {

                 clearInterval(obj.timer);

                 obj.timer = setInterval(function() {

                     //chg这个变量本来为长度，宽度，或者透明度什么的

                     //但是现在通过一个getStyle()函数来获取

                     var chg = 0;

                     //进入函数，需要先判定是否透明度样式

                     if (stChg == 'opacity') {

                         //为真，则执行parseFloat()此方法返回的是浮点数

                         chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100);

                     } else {

                         //为假，则执行parseInt()此方法返回的是整数

                         chg = parseInt(getStyle(obj, stChg));

                     }

                     //判定初始值(chg)是否小于输入值(chgWid)

                     if (chg < chgWid) {

                         speed = 10;

                     } else {

                         speed = -10;

                     }

                     //console.log(speed);

                     if (chg == chgWid) {

                         //相等时候，则清楚定时器

                         clearInterval(obj.timer);

                     } else {

                         //不相等时，则先进性判定样式是否为特殊样式opacity

                         if (stChg == 'opacity') {

                             //为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed

                             //比如开始是(30+10),那么下一次就为(40+10)

                             obj.style.opacity = (chg + speed) / 100;

                             //为真，对应的ie浏览器，方法同上

                             obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')';

                         } else {

                             //为假则为普通样式取值，stChg为width时style[width]=style.width

                             obj.style[stChg] = chg + speed + 'px';

                         }

                     }

                 }, 30);

             }

             //这个函数返回的是一个值，例如attr传参为width

             //为真时obj.currentStyle[attr]=200

             function getStyle(obj, attr) {

                 if (obj.currentStyle) {

                     //currentStyle获取样式的值，对应的是ie浏览器

                     return obj.currentStyle[attr];

                 } else {

                     //同理，对应的是其他浏览器

                     return getComputedStyle(obj, false)[attr];

                 }

             }

         }

     </script>

javascript动画效果之任意效果任意值的更多相关文章

  1. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  2. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  3. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  4. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  5. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  6. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  7. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. cocos2dx - shader实现任意动画的残影效果

    本节主要讲利用cocos2dx机制实现opengl es shader脚本的绘制 这里先看下最终效果:                      这里分别实现了灰度效果及残影的效果. 一.绘制基类 这 ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. JVM调优实战

      JVM调优实战 文档修订记录 版本 日期 撰写人 审核人 批准人 变更摘要 & 修订位置                                                   ...

  2. 图片上传插件用法,JS语法【三】

    注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...

  3. python numpy基础 数组和矢量计算

    在python 中有时候我们用数组操作数据可以极大的提升数据的处理效率, 类似于R的向量化操作,是的数据的操作趋于简单化,在python 中是使用numpy模块可以进行数组和矢量计算. 下面来看下简单 ...

  4. 关于在mfc中cstring转为float和ini

    CString str1,str, str2; GetDlgItemText(IDC_EDIT1, str1); GetDlgItemText(IDC_EDIT2, str2); UINT value ...

  5. ABAP字符串操作 截取字符长度 取位数

    ABAP字符串操作   ABAP對字串的操作方法與其他語言的操作有較大差別,以下是較常用的對字串操作的方法: 1. 字串的連接:CONCATENATEDATA: t1 TYPE c LENGTH 10 ...

  6. LeetCode #139. Word Break C#

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  7. 关于在vs中添加生成命令时的注意事项

    涉及到目录最好用双引号括起来,防止在目录含有空格或文字时发生错误.例如 del "$(SolutionDir)\..\xxxxxx\xxxx\Build\*.*" /s /q xc ...

  8. HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online)

    HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online) 题目链接http://acm.hdu.edu.cn/showp ...

  9. laravel 日志

    laravel学院的 http://laravelacademy.org/post/195.html 他人博客的 http://www.cnblogs.com/yjf512/p/4173261.htm ...

  10. 单链表，循环链表，双向链表（C++实现）

    首先是单链表(带附加表头),实现类代码如下: template<class T> struct LinkNode{//链表节点 T data; LinkNode *link; LinkNo ...