通过学习，我发现当同一个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. 【IE6的疯狂之十二】一个display:none引起的3像素的BUG

    今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码:   <div style="width: ...

  2. [DP优化方法之斜率DP]

    什么是斜率dp呢 大概就把一些单调的分组问题 从O(N^2)降到O(N) 具体的话我就不多说了 看论文: http://www.cnblogs.com/ka200812/archive/2012/08 ...

  3. Java 并发 线程的生命周期

    Java 并发 线程的生命周期 @author ixenos 线程的生命周期 线程状态: a)     New 新建 b)     Runnable 可运行 c)     Running 运行 (调用 ...

  4. DFS - leetcode [深度优先遍历]

    最短路径=>BFS    所有路径=>DFS 126. Word Ladder II BFS+DFS: BFS找出下一个有效的word进队 并记录step 更新两个变量:unordered ...

  5. H3C SecPath 防火墙端口回流

    外网IP地址可以通过域名访问内外800端口网站,内网地址不可以,需要做回流 <<内网口.外网口都需要做nat映射>>定义ACL3001acl number 3001rule 0 ...

  6. storm实战总结笔记

    storm是一款开源的.分布式的.低延迟的.可扩展的.容错的实时计算框架,采用clojure和java的混合编程,总体两者的代码总量是55开的,但clojure语言具有很强的表现力,所以storm的核 ...

  7. Eclipse 打开当前文件所在的文件夹

    两种方法: 1.安装EasyExplorer插件,有了这个插件就可以很方便地打开资源文件所在的文件夹了. EasyExplorer 从 http://sourceforge.net/projects/ ...

  8. java中异常处理机制的简单原理

    以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!

  9. iOS身份证号码识别

    一.前言   身份证识别,又称OCR技术.OCR技术是光学字符识别的缩写,是通过扫描等光学输入方式将各种票据.报刊.书籍.文稿及其它印刷品的文字转化为图像信息,再利用文字识别技术将图像信息转化为可以使 ...

  10. LYF电子书制作工具(CHM格式)

    可以制作CHM电子书 可以制作电子相册 下载地址:http://files.cnblogs.com/files/blogLYF/LYF电子书制作安装包.zip http://files.cnblogs ...