javascript学习-原生javascript的小特效（改变透明度效果）
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的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的小特效（改变透明度效果）的更多相关文章
- javascript学习-原生javascript的小特效（原生javascript实现链式运动）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效（简单的运动效果）
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...
- javascript学习-原生javascript的小特效（多物体运动效果）
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul> <li> ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- Javascript学习2 - Javascript中的表达式和运算符
原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...
- javascript学习(二)javascript常见问题总结
在js使用过程中,经常会碰到一些问题,本人利用闲暇时间整理了一些常见问题的解决方法,贴出来和大家分享,有需要的朋友可以参考下 1.JS中方法和变量都是区分大小写的 2.单引号.双引号在JS中没有特殊 ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
随机推荐
- java多线程中的生产者与消费者之等待唤醒机制@Version2.0
二.生产者消费者模式的学生类成员变量生产与消费demo, @Version2.0 在学生类中添加同步方法:synchronized get()消费者,synchronized set()生产者 最终版 ...
- 浅析Java的HashCode，以及equals
1.JDK规定,equals相等的两个对象hashCode也必须相等,这两个方法都是从Object上面继承而来的,通过观察JDK源码可以发现Object的equals方法是对2个对象的地址(逻辑地址, ...
- peak num
class Solution {public: int findPeakElement(vector<int>& nums) { int i=0; int n=nums ...
- fork和exec一起使用
先预览一下工程的目录树: 实现的功能:master进程启动slave进程. 看看Makefile内容: all: master.out slave.out master.out: master.cpp ...
- asp.net导入Excel表
一.导入Excel的界面这个界面很简单,代码就不列出来了.二.导入的代码我分了两部分,第一部分是点击查看数据的代码,这个是将数据导入到DataTable里面,但是还没有导入到数据库里.这里需要注意的是 ...
- 《Effective C++》读书摘要
http://www.cnblogs.com/fanzhidongyzby/archive/2012/11/18/2775603.html 1.让自己习惯C++ 条款01:视C++为一个语言联邦 条款 ...
- JAVA基础知识之多线程——控制线程
join线程 在某个线程中调用其他线程的join()方法,就会使当前线程进入阻塞状态,直到被join线程执行完为止.join方法类似于wait, 通常会在主线程中调用别的线程的join方法,这样可以保 ...
- Poj(1511)，SPFA
题目链接:http://poj.org/problem?id=1511 嗯,最后一次写SPFA了,以后就套模板了. 题意:给出n个点和n条有向边,求所有点到源点1的来回最短路之和(保证每个点都可以往返 ...
- PowerShell处理RSS信息
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 环境:Windows Server 2012 EN(解决PowerShell控制台中文乱码问题:方 ...
- 遍历对象的list删除时报错问题。
我们对一个对象的list或者map进行删除操作时,可能会这么写 for(Distributor distributor:distributorList){ String distributorShor ...