这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现的模仿 QQ 头像资料卡显示与隐藏效果, 涉及 javascript 鼠标事件响应及页面元素属性动态操作相关技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现的模仿 QQ 头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下:
我们使用 QQ 时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当鼠标移出头像或资料卡时,资料卡延时隐藏。
实质就是延时提示框问题!
首先写好布局:
- <style>
- div { float:left; margin:5px; } .head { width:50px;height:50px;background-color:pink;
- } .info { width:250px;height:200px;background-color:blue;display:none;
- }
- </style>
- <div>
- <div class="head">
- </div>
- <div class="info">
- </div>
- </div>
其次 js 部分:
思路:
(1)鼠标移入头像,资料卡显示;鼠标移出头像,资料卡延时隐藏 setTimeout
(2)鼠标移入资料卡,资料卡仍显示,并清除资料卡延时隐藏的变量
(3)鼠标移出资料卡,资料卡延时隐藏,并且此时如果在移入到头像中,资料卡扔显示,并清除资料卡延时隐藏的变量
- window.onload = function() {
- var oHead = document.getElementsByClassName("head")[0];
- var oInfo = document.getElementsByClassName("info")[0];
- var timer = null;
- oHead.onmouseover = function() {
- clearTimeout(timer);
- oInfo.style.display = "block";
- };
- oHead.onmouseout = function() {
- timer = setTimeout(function() {
- oInfo.style.display = "none";
- },
- 500);
- };
- oInfo.onmouseover = function() {
- clearTimeout(timer);
- oInfo.style.display = "block";
- };
- oInfo.onmouseout = function() {
- timer = setTimeout(function() {
- oInfo.style.display = "none";
- },
- 500);
- };
- };
优化代码:
- oInfo.onmouseover = oHead.onmouseover = function() {
- clearTimeout(timer);
- oInfo.style.display = "block";
- };
- oInfo.onmouseout = oHead.onmouseout = function() {
- timer = setTimeout(function() {
- oInfo.style.display = "none";
- },
- 500);
- };
函数封装:
注意:事件 .xx 等于 ["xx"]
第一种:函数外获取变量,调用函数,适用于一个或两个元素调用此事件
- window.onload = function() {
- var oHead = document.getElementsByClassName("head")[0];
- var oInfo = document.getElementsByClassName("info")[0];
- reminder(oHead, oInfo, "onmouseover", "onmouseout");
- function reminder(div1, div2, event1, event2) {
- var timer = null;
- div1[event1] = div2[event1] = function() {
- clearTimeout(timer);
- div2.style.display = "block";
- };
- div1[event2] = div2[event2] = function() {
- timer = setTimeout(function() {
- div2.style.display = "none";
- },
- 500);
- };
- }
- };
第二种:函数外获取变量,调用函数,适用于多个元素调用此事件
- window.onload = function() {
- var number = 0;
- reminder("head", "info", "onmouseover", "onmouseout", number);
- function reminder(div1, div2, event1, event2, num) {
- var oHead = document.getElementsByClassName(div1)[num];
- var oInfo = document.getElementsByClassName(div2)[num];
- var timer = null;
- oHead[event1] = oInfo[event1] = function() {
- clearTimeout(timer);
- oInfo.style.display = "block";
- };
- oHead[event2] = oInfo[event2] = function() {
- timer = setTimeout(function() {
- oInfo.style.display = "none";
- },
- 500);
- };
- }
- };
比如,一共有三个头像的话,就可以用 for 循环遍历为每个元素绑定事件:
- var number = null;
- for (number = 0; number < 3; number++) {
- reminder("head", "info", "onmouseover", "onmouseout", number);
- }
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0710/334224.html