<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//全局变量定义
var maxZIndex = 0; //层最大数值
var allTip = new Array; //存储所有的纸条
var allClose = new Array; //所有关闭按钮
var allTipNum = 0; //纸条总数
var allCloseNum = 0; //关闭按钮总数
var tipTag = "div"; //纸条显示所用的html Tag
var tipClass = "tips"; //纸条显示所用Tag 的class
var closeClass = "close"; //关闭按钮css类
var areaWidth = 0; //展示区宽度
var areaHeight = 0; //展示区高度
var areaBaseX = 0; //展示区基X
var areaBaseY = 0; //展示区基Y
var areaID = "area"; //展示区ID
var isIE = document.all ? true : false; //是否是IE浏览器标识
var isMouseDown = false; //鼠标被按下的标记
var currentTip; //当前被点中的Tip
var currentTipID; //当前被点中的Tip的ID
var currentClose; //当前关闭按钮
var MouseX; //鼠标点下的X坐标
var MouseY; //鼠标点下的Y坐标
/************************************************
* 功能:获取所有的纸条
*
* 函数名:getAllTip
*************************************************/
function getAllTip() {
var allTag = document.getElementsByTagName(tipTag); //根据纸条使用的html标签获取所有的标签以供筛选
var allTagLen = allTag.length; //数组AllTag的长度
for (var i = 0; i < allTagLen; i++) {
if (allTag[i].className == tipClass) { //删选出纸条
allTip[allTipNum] = allTag[i];
allTipNum++;
} else if (allTag[i].className == closeClass) {
allClose[allCloseNum] = allTag[i];
allCloseNum++;
}
}
}
/************************************************
* 功能:获取最大的z-index
* 注意:z-index要写在标签内部中
* 写在（外部）css样式表无法获取
* 函数名:getMaxZIndex
*************************************************/
function getMaxZIndex() {
for (var i = 0; i < allTipNum; i++) {
var curZ = parseInt(allTip[i].style.zIndex);
if (curZ > maxZIndex) {
maxZIndex = curZ;
}
}
}
/************************************************
* 功能:获取显示区的大小
*
* 函数名:getAreaSize
*************************************************/
function getAreaSize() {
var par = null;
if (allTipNum > 0) {
par = allTip[0].parentElement;
alert(par.className);
areaHeight = par.style.height;
areaWidth = par.style.width;
}
}
/************************************************
* 将目标块前置
* 参数:为目标块id
* 函数名:takTipToFront
*************************************************/
function takeTipToFront(tip) {
var curZ = parseInt(tip.style.zIndex);
if (isNaN(curZ) || curZ < maxZIndex) {
tip.style.zIndex = ++maxZIndex;
}
}
//关闭
function closeTip(obj) {
var tip = "";
while (obj) {
if (obj.className == tipClass) {
tip = obj.parentNode;
break;
} else {
obj = obj.parentNode;
}
}
if (tip) {
tip.style.display = "none";
}
//alert(tip);
isMouseDown = false;
currentClose = "";
currentTip = "";
}
/************************************************
* 随机打乱纸条
*
* 函数名:randomShowTip
*************************************************/
function randomShowTip() {
var area = document.getElementById(areaID);
areaBaseX = area.offsetTop; //容器基X
areaBaseY = area.offsetLeft; //容器基Y
areaHeight = area.offsetHeight; //容器高
areaWidth = area.offsetWidth; //容器宽
var tipWidth;
var tipHeight;
if (allTipNum > 0) {
for (var i = 0; i < allTipNum; i++) {
if (allTip[i].style.display != "none") {
tipWidth = allTip[i].offsetWidth;
tipHeight = allTip[i].offsetHeight;
var r1 = Math.random();
var r2 = Math.random();
var diffx = Math.ceil((areaWidth - tipWidth - 15) * r1); //至少有15px的边距
var diffy = Math.ceil((areaHeight - tipHeight - 20) * r2);
if (diffx < 15) {
diffx += 15;
}
if (diffy < 20) {
diffy += 20;
}
allTip[i].style.left = areaBaseX + diffx + "px";
allTip[i].style.top = areaBaseY + diffy + "px";
}
}
}
}
/************************************************
* 处理通用的（在任何位置）鼠标按下事件
*
* 函数名:processMouseDown
*************************************************/
function processMouseDown() {
document.onmousedown = function(e) {
var e = e ? e : event;
if (e.button == (isIE ? 1 : 0)) {
isMouseDown = true;
}
if (isMouseDown && currentTip && !currentClose) {
takeTipToFront(currentTip);
if (isIE) {
currentTip.filters.alpha.opacity = 30;
} else {
currentTip.style.opacity = 0.3;
}
}
}
}
/************************************************
* 处理通用的（在任何位置）鼠标放开事件
*
* 函数名:processMouseUp
*************************************************/
function processMouseUp() {
document.onmouseup = function(e) {
isMouseDown = false;
if (currentTip) {
if (isIE) {
currentTip.releaseCapture();
currentTip.filters.alpha.opacity = 100;
} else {
window.releaseEvents(currentTip.MOUSEMOVE);
currentTip.style.opacity = 1;
}
}
currentTip = "";
currentClose = "";
}
}
/************************************************
* 处理纸条移动
*
*************************************************/
function processMoveTip() {
document.onmousemove = function(e) {
var e = e ? e : event;
if (isMouseDown && currentTip && !currentClose) {
var mrx = e.clientX - MouseX;
var mry = e.clientY - MouseY;
currentTip.style.left = parseInt(currentTip.style.left) + mrx + "px";
currentTip.style.top = parseInt(currentTip.style.top) + mry + "px";
.7z （2个子文件） 
贴纸条 
tips.js 9KB
tips.html 14KB资源评论
能写程序-会种庄稼
- 粉丝: 214
- 资源: 6
