通过学习，我发现当同一个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. KMP 算法 学习 整理

    我自己整理的KMP算法的PDF文件:http://pan.baidu.com/s/1o8yKIi2提取密码:8291 别的就不多说啥了,感谢来自海子 博客园的 资料--

  2. Java的URL来下载网页源码

    import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.IOException; impor ...

  3. MultipartResolver 文件上传

    SpringMVC 中文件上传 MultipartResolver 博客分类: SpringMVC - 基础篇   基于前面文章的基础上. 一.准备 需要的jar  二.配置 1.  spmvc-se ...

  4. 《Intel汇编第5版》 汇编逆转字符串

    一.逆转字符串 逆转一个字符串可以利用栈这个数据结果,顺次读取所有元素压栈,再出栈所有元素即可逆序 二.push和pop指令 三.pushfd和popfd 四.pushad和popad 五.代码以及结 ...

  5. QDataStream对QVector的序列化

    最近发现QDataStream这个好东东,序列化发送数据很方便,与大家分享一下. 客户端: line.h #ifndef LINE_H #define LINE_H #include <QStr ...

  6. 在Table的Tbody中实现滚动条滚动

    功能描述: 在一个Table中实现表头固定不动,内容部分实现通过滚动条滚动. 实现效果: 当页面宽度变宽时,只有最后一列的宽度会改变. 逻辑实现: 1.将表头和内容分别使用两个table标签包裹,每一 ...

  7. JSONObject处理java.util.Date

    JSONObject的内容为: {"userId":"A000004FFDCE14","userName":"好好干g" ...

  8. 二十六、oracle pl/sql 分页

    一.无返回值的存储过程 古人云:欲速则不达,为了让大家伙比较容易接受分页过程编写,我还是从简单到复杂,循序渐进的给大家讲解.首先是掌握最简单的存储过程,无返回值的存储过程. 案例:现有一张表book, ...

  9. 《精通CSS》——个人总结

    [属性选择器] 属性选择器可以根据某个属性是否存在或属性的值来寻找元素. 只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器.在 IE6 及更低的版本中,不支持属性选择. 事例: ...

  10. Jenkins中集成Gcov代码覆盖率报告

    最近终于把gcov代码覆盖报告集成到jenkins中了,总算是完成工作,写篇博客总结下. 我循序渐进地用了三个工具:gcov, lcov, gcovr 这三个工具原理(其实gcovr依赖于GNU的gc ...