通过学习，我发现当同一个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. IOS常遇问题个人收藏网址指南

    代码适配Masonry使用的详细介绍: http://blog.csdn.net/majiakun1/article/details/51160339 Masonry使用注意篇: http://www ...

  2. Python学习笔记——基础篇【第五周】——常用模块学习

    模块介绍 本节大纲: 模块介绍 time &datetime模块   (时间模块) random   (随机数模块) os   (系统交互模块) sys shutil   (文件拷贝模块) j ...

  3. Apache Storm简介

    Apache Storm简介 Storm是一个分布式的,可靠的,容错的数据流处理系统.Storm集群的输入流由一个被称作spout的组件管理,spout把数据传递给bolt, bolt要么把数据保存到 ...

  4. 【Time系列三】简单的计时器(秒表)

    之前在 "for与while的洪荒之力" 中介绍到计时器,不过那样弄感觉好麻烦啊, 碰巧昨天学Java的时候,讲到求余可以用来求时间 ! for与while链接: http://w ...

  5. 学会Nodejs 的require和exports

    NodeJs中模块的导入和导出,是最基本的概念,但是看了之后,心里还是有一些疑惑的地方,比如: 1.有两个文件:part.js 和 main.js,main.js中要想使用part.js中定义的变量和 ...

  6. Entity Framework映射的总结

    EF是一个ORM工具,映射永远是最核心的部分.所以接下来详细介绍Code First模式下EF的映射配置. 通过Code First来实现映射模型有两种方式Data Annotation和Fluent ...

  7. isset()和empty()的区别

    form表单的数据提交过来 如果用isset() if(isset($_GET)){ .....} '' '0' 0 返回 true 不够严谨 empty() '' '0' 0 显示返回false 比 ...

  8. python报错Could not open PYTHONSTARTUP

    root@liqian-python:/pythonShare/monitor/m_server/core# pythonPython 2.7.10 (default, Oct 14 2015, 16 ...

  9. 常用到的简单命令 Sublime Git NPM WindowsCMD MacTerminal(Unix命令)

    sublime 选择标签及其内容 ctrl+shift+a连续按两次 Git 撤销 add 重置暂存区的指定文件,与上一次commit保持一致,但工作区不变 git reset [file] 撤销 c ...

  10. 浅谈Objective-C对象初始化的三类程序猿

    序 早上看了位仁兄写了<Swift:让人眼前一亮的初始化方式>的文章.什么?!初始化?Objective-C!好吧,吓哔哔~~~ 一.普通程序猿 普通程序员使用最常见路人姿势等场.普普通通 ...