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 相关文章推荐
setInterval计时器不准的问题解决方法
May 08 Javascript
node.js中的console用法总结
Dec 15 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
深入理解javascript中的this
Feb 08 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
微信支付开发发货通知实例
2016/07/12 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
js表头排序实现方法
2015/01/16 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
幼儿园保育员岗位职责
2014/04/13 职场文书
嘉宾邀请函
2015/01/31 职场文书
指导老师鉴定意见
2015/06/05 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
nginx实现动静分离的方法示例
2021/11/07 Servers
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js