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


Posted in Javascript onMarch 25, 2016

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<script type="text/javascript">
<!--
//定义“获得指定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 id="tip" style="background-color:blue;width:48%;height:48%;" onmouseover="show();" onmouseout="hiddentip();">
</div>
</body>
</html>

PS:上述代码没有进行格式化的排版处理,对此小编给大家提供了一款本站的js代码在线压缩、格式化与加密工具,非常强大实用:

JavaScript压缩/格式化/加密工具:http://tools.3water.com/code/jscompress

上面这款js工具中的加密功能可实现js代码的eval函数加密形式,对此本站还提供了如下这款针对eval函数加密的解密工具,非常强大实用!

js的eval方法在线加密解密工具:http://tools.3water.com/password/evalencode

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

Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
javascript编写简易计算器
May 06 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 #Javascript
详解Javascript继承的实现
Mar 25 #Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 #Javascript
JavaScript修改作用域外变量的方法
Mar 25 #Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 #Javascript
JavaScript入门系列之知识点总结
Mar 24 #Javascript
JS实现支持Ajax验证的表单插件
Mar 24 #Javascript
You might like
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
设定php简写功能的方法
2019/11/28 PHP
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
元宵晚会主持词
2014/03/25 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
本科生就业推荐信
2014/05/19 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
团委工作总结2015
2015/04/02 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
经典爱情感言
2015/08/03 职场文书
推普标语口号大全
2015/12/26 职场文书
2016年少先队活动总结
2016/04/06 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python