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 相关文章推荐
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
vue实现公共方法抽离
Jul 31 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
JavaScript实现复选框全选功能
Apr 11 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
使用angular写一个hello world
2015/01/23 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python3调用R的示例代码
2018/02/23 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
大四学生毕业自荐信
2013/11/07 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
社会实践感言
2014/01/25 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
党小组推荐意见
2015/06/02 职场文书
任命书格式范文
2015/09/22 职场文书
人民调解协议书
2016/03/21 职场文书
MySQL普通表如何转换成分区表
2022/05/30 MySQL
Flink 侧流输出源码示例解析
2022/09/23 Servers