前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 （ 以下效果兼容IE5+ IE5-以下没有测试哦）

今天为大家演示的效果是一个div，鼠标经过的时候透明度为100%，鼠标移出的时候透明度变为原来的50%。

也许大家会问现在这么多流行的JS框架和CSS3的transition配合伪类:hover都可以实现的效果干嘛要用这么老套的方式呢？没错的，现在用CSS3，JS框架都是可以轻松的实现以下的效果，但是为了学习原生的javascript的童鞋，用CSS3和JS框架实现的就留给大家去实现了。现在我们还是多用原生的方法吧。

1：先给出HTML：

<body>

<div id="div1">

</div>

</body>

2：列出CSS：

<style type="text/css">  

body{margin: 0;padding: 0;}

div{background: red;width: 200px;height: 150px;opacity: 0.5;filter:alpha(opacity:50);  }

</style>

3：现在到了我们的JS部分

<script type="text/javascript">

     window.onload=function(){   页面加载完执行这个匿名函数

      var div=document.getElementById("div1");   获取div

     div.onmouseover=function(){  当鼠标经过这个div的时候执行onOut函数并传参数100

      onOut(100);

     }

      div.onmouseout=function(){ 当鼠标离开这个div的时候执行onOut函数并传参数10

      onOut(10);

      }

     }

     var timer=null; 

      创建一个变量用来后面装定时器唯一的ID不明白定时器的童鞋可以看看我之前专门写的javascript定时器文章

     var opa=10; 定义一个原始的透明度这里和CSS中的定义一样

     function onOut(tart){   创建一个函数onOut

      var div=document.getElementById("div1");

      clearInterval(timer);  

      一开始触发这个函数的时候先把定时器都清空下，防止之前的定时器执行的时候再次触发该函数而叠加

      timer=setInterval(function(){ 创建一个变量用来后面装定时器唯一的ID不明白定时器的童鞋可以看看我之前专门写的javascript定时器文章

      var midd=0;   因为要有动画的效果要每隔一段时间都增加或者减少透明度，我们需要一个中中间变量，我们设置为0

        if(opa>tart){  比较模板透明都和当前透明度，来确定透明度的变化是增还是减

         midd=-10;   让当前透明都每次递减10

        }else{

        midd=10;  让当前透明都每次增加10

        }





        if(tart==opa){ 比较模板透明都和当前透明度，当他们相等的时候 ，就把定时器都清空

        clearInterval(timer); 





        }else{

        opa+=midd;  让透明度opa=opa+midd，然后把它赋值给当前div的透明度属性

        div.style.filter='alpha(opacity:'+opa+')';  兼容IE

        div.style.opacity=opa/100;





        }

      },10)





     }

</script>

javascript学习-原生javascript的小特效（改变透明度效果）的更多相关文章

  1. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  2. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  3. javascript学习-原生javascript的小特效（简单的运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

  4. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

  5. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  6. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  7. Javascript学习2 - Javascript中的表达式和运算符

    原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...

  8. javascript学习(二)javascript常见问题总结

    在js使用过程中,经常会碰到一些问题,本人利用闲暇时间整理了一些常见问题的解决方法,贴出来和大家分享,有需要的朋友可以参考下 1.JS中方法和变量都是区分大小写的  2.单引号.双引号在JS中没有特殊 ...

  9. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

随机推荐

  1. 浅析Java的HashCode，以及equals

    1.JDK规定,equals相等的两个对象hashCode也必须相等,这两个方法都是从Object上面继承而来的,通过观察JDK源码可以发现Object的equals方法是对2个对象的地址(逻辑地址, ...

  2. （转载）PERL 处理CSV

    #!/usr/bin/perl#use strict;open(FILE1,"C:/Perl/BX/BX-Users.csv");open(FILE2,"C:/Perl/ ...

  3. office 2016 专业增强版 和 visio 2016 专业版 下载安装（附带激活工

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://babyshen.blog.51cto.com/8405584/1697910 o ...

  4. destoon短信接口修改方法

    destoon是很优秀的B2B行业站程序.程序模块化开发契合度很高,二次开发起来也很顺畅.数据缓存,权限分配,SEO功能方面都不错. 但是在使用这套程序的时候,常常要用到发送短信的功能,而destoo ...

  5. hdwiki中模板和标签的使用

    MVC中的视图view 主要负责页面显示部分,所有的页面显示全部在此实现,视图对整个页面负责,它通过control的调用来显示页面和数据. ......视图(view)类template.class. ...

  6. java 23种设计模式及具体例子 收藏有时间慢慢看

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代 码可靠性. 毫无疑问,设计模式 ...

  7. 单利 复利计算器程序1.0 2.0 3.0 [ 合 ] 之 WEB

    对单复利计算器程序进行改进 更新为网页版的. 界面不太美观 请谅解 由于时间问题暂未完善好! 计算部分的主要源代码:

  8. JS获取非行间样式

    我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...

  9. JSTL，自定义一个标签的功能案例

    1.自定义一个带有两个属性的标签<max>,用于计算并输出两个数的最大值: 2.自定义一个带有一个属性的标签<lxn:readFile  src=“”>,用于输出指定文件的内容 ...

  10. Ombrophobic Bovines 分类： POJ 图论 最短路 查找 2015-08-10 20:32 2人阅读 评论(0) 收藏

    Ombrophobic Bovines Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16539 Accepted: 3605 ...