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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
使用node.js搭建服务器
May 20 Javascript
微信小程序异步处理详解
Nov 10 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
使用express来代理服务的方法
Jun 21 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
详解Vue的options
May 15 Vue.js
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
PHP获取网卡地址的代码
2008/04/09 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Javascript 动态改变imput type属性
2016/11/01 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
广州迈达威.net面试题目
2012/03/10 面试题
大学活动邀请函
2014/01/28 职场文书
创业融资计划书
2014/04/25 职场文书
学用政策心得体会
2014/09/10 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书