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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
js 概率计算(简单版)
Sep 12 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
YII实现分页的方法
2014/07/09 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php实现映射操作实例详解
2019/10/02 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python内建数据结构详解
2016/02/03 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
校长寄语大全
2014/04/09 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript