JS+CSS实现感应鼠标渐变显示DIV层的方法


Posted in Javascript onFebruary 20, 2015

本文实例讲述了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>

<title>JS+CSS实现的感应鼠标渐变显示的DIV层</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(x){

   if(s){clearInterval(s);}

   $("tip").style.display="block";

   s = setInterval(change_show,1);

}

//控制change_hidden()行为

function hidden(x){

   $("tip").innerHTML="";

   h = setInterval(change_hidden,1);

}

//-->

</script>

</head>

<body>

<div id="tip" style="background-color:blue;width:48%;height:48%;" onmouseover="show(this);" onmouseout="hidden(this);">

</div>

<br />

<br>鼠标滑过这里,div层渐变显示<br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

</body>

</html>

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

Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
JS求平均值的小例子
Nov 29 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 #Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 #Javascript
jQuery常用数据处理方法小结
Feb 20 #Javascript
jQuery数据缓存用法分析
Feb 20 #Javascript
jQuery性能优化技巧分析
Feb 20 #Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 #Javascript
You might like
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
Add a Table to a Word Document
2007/06/15 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
python基础教程之匿名函数lambda
2017/01/17 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python简易版停车管理系统
2019/08/12 Python
如何通过python实现全排列
2020/02/11 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
行政二审代理词
2015/05/25 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书