JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1221 次日期：2016-07-16 13:09:16

温馨提示：小编为您整理了“JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)”,方便广大网友查阅！

这篇文章主要介绍了JS+CSS实现鼠标经过弹出一个DIV框的实现方法,带缓冲渐变动画效果,涉及鼠标事件的响应及结合时间函数定时触发形成动画渐变效果的相关技巧,需要的朋友可以参考下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js+CSS实现表格渐变</title>

<style>

#tip{

position:absolute;

left:90px;

width:0px;

height:0px;

color:#FFF;

font-size:12px;

background-color:#000;

border:1px solid #DEF;

filter:Alpha(Opacity=0);

opacity:0;

z-index:999;

}

</style>

<!--

//定义“获得指定dom节点”的函数，因为其重用率高

function $(d){return document.getElementById(d);}

//控制div逐渐显示

var i = 0;

function change_show(){

var obj = $("tip");

i=i+5; //逐渐显示速度

obj.style.filter = "Alpha(Opacity=" + i + ")"; //透明度逐渐变小

obj.style.opacity = i/100; //兼容FireFox

if(i>=100){

clearInterval(s);

i=0;

}

//控制div逐渐消失

var j = 100;

function change_hidden(){

var obj = $("tip");

j=j-5; //逐渐消失速度

obj.style.filter = "Alpha(Opacity=" + j + ")"; //透明度逐渐变大

obj.style.opacity = j/100; //兼容FireFox

if(j<=0){

clearInterval(h);

//obj.style.display="none";

j=100;

}

//控制change_show()行为

var s;

function show(){

if(s){clearInterval(s);}

$("tip").style.display="block";

s = setInterval(change_show,1);

}

//控制change_hidden()行为

var h;

function hiddentip(){

$("tip").innerHTML="";

h = setInterval(change_hidden,1);

}

//-->

</script>

</head>

<body>

鼠标滑过这里，渐变出现

</div>

</body>

</html>

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS实现响应鼠标点击动画渐变弹出层效果代码

下一篇：JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

手机网站地址：JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！