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 相关文章推荐
JQuery的一些小应用收集
Mar 27 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jsTree使用记录实例
Dec 01 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 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 接口类与抽象类的实际作用
2009/11/26 PHP
PHP 中文处理技巧
2010/04/25 PHP
php session安全问题分析
2011/06/24 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python pygame实现方向键控制小球
2019/05/17 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
HTTP状态码详解
2021/03/18 杂记
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
银行客户经理岗位职责
2015/04/09 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python