程序博客网 > 女生软件测试

javascript学习-原生javascript的小特效（改变透明度效果）

来源：互联网发布：女生软件测试编辑：程序博客网时间：2024/05/05 03:52

前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的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>

0 0

女生软件测试

女生软件测试

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子补牙一般多钱镶牙吧补牙会痛吗补牙多少钱啊补牙的是什么材料补牙是什么补牙一般要多久补牙一般要多少时间补牙一颗哪里可以补牙补牙大概要多少钱自己补牙 3m树脂烤瓷牙的种类烤瓷牙冠价格烤瓷牙的价钱修补牙齿要多少钱牙齿修补价格表怎么牙科什么情况需要补牙千万不要动不动补牙补电手机补电手机补电代码手机补电是什么意思电瓶亏电了怎样能补起来补电是什么意思农村电商一年补多少钱补码二进制补码补码怎么算负数补码负数的补码补码运算二进制补码运算法则 -8的补码 128的补码二进制补码计算器变形补码计算 -128的补码负数的补码怎么算