通过学习，我发现当同一个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. java 生成条形码

    package com.sun.erwei; import java.awt.image.BufferedImage;import java.io.ByteArrayOutputStream;impo ...

  2. C#+ArcEngine中com对象的释放问题

    1.问题描述 最近在写C#下AE的开发,在循环获取数据并修改时碰到了两个问题"超出系统资源"和"超出打开游标最大数":在网上看了一些资料,发现都是说在循环中没有 ...

  3. jquery一个简单的菜单小插件

    刚学会封装插件,先来封装一个小的菜单插件 html部分 <ul class="zong"> <li class="yiji"> < ...

  4. 【cocos2d-js 3.0】制作2048

    2048:在一个4X4的方阵中,玩家需要滑动上面的数字,如果俩个数字相邻并且相等,则相加,需要达到2048,方可胜利. 因为在浏览器操作,所以此例的操作方法为:键盘上的w,s,a,d代表上下左右,也可 ...

  5. 大学二三事——那些事（1）

    虽然另外一个队友早上忽然拉肚子没有办法去了,我个阿骚还是决定出发. 本来以为早点过去签到可以躲过李导,没想到在她上班的路上被她撞见.   坐在早上那班发往周至县的客车的时候,天气忽好忽坏.   从周至 ...

  6. JAVA中方法的定义与使用（课堂学习归纳）

    组合数,百度词条是这样解释的:从m个不同元素中取出n(n≤m)个元素的所有组合的个数,叫做从m个不同元素中取出n个元素的组合数(Combination) 对于计算组合数,需要一定的工作量,计算机可以很 ...

  7. 找回误删除的UBUNTU16.04桌面壁纸图片，或把桌面背景图片另存。20170114

    今天遇到一个小问题,之前下载并设置为桌面壁纸的一张图片在整理文件的时候不小心删除了.由于想不起来当时从哪里找到的图,所以就想把当前桌面壁纸重新保存.经网上查询,未见正确的保存方法,故写在此处备忘. 1 ...

  8. JAVA: 接入YSDK遇到的问题

    JAVA后台接口: 1, 腾讯开放平台: http://wiki.open.qq.com/wiki/%E9%A6%96%E9%A1%B5 2,YSDK介绍,大概流程: http://wiki.open ...

  9. for循环---几种写法

    最常见的写法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  10. 《JS权威指南学习总结--6.9序列化对象》

    内容要点: 一.JSON.stringify()和JSON.parse() 1.对象序列化(serialization)是指将对象的状态转换为字符串,也可将字符串还原为对象.ES5提供了内置函数JSO ...