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 相关文章推荐
使用时间戳解决ie缓存的问题
Aug 20 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 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中文件上传的安全问题
2006/10/09 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
[原创]图片分页查看
2006/08/28 Javascript
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
Python运算符+与+=的方法实例
2021/02/18 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
培训演讲稿范文
2014/01/12 职场文书
销售业务员岗位职责
2014/01/29 职场文书
工作表现自我评价
2014/02/08 职场文书
团代会主持词
2014/04/02 职场文书
优秀员工推荐信
2014/05/10 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL