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 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jquery提示效果实例分析
Nov 25 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
vue组件创建的三种方式小结
Feb 03 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
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python性能优化技巧
2015/03/09 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Django 路由层URLconf的实现
2019/12/30 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
浅析python中的del用法
2020/09/02 Python
Python random模块的使用示例
2020/10/10 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
出国导师推荐信
2014/01/16 职场文书
建筑个人求职信范文
2014/01/25 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
五年级语文教学反思
2014/01/30 职场文书
中学生励志演讲稿
2014/04/26 职场文书
爱祖国演讲稿
2014/05/04 职场文书
个人租房协议书
2014/11/28 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
如何有效防止sql注入的方法
2021/05/25 SQL Server