您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

JS+CSS实现一个气泡提示框_javascript技巧

2025/1/18 23:25:49发布16次查看
分享一个气泡提示框,练习的技术有:(1)js响应鼠标的事件;(2)纯css制作三角形。
效果这样:
这是html:
复制代码 代码如下:
气泡对话框
复制代码 代码如下:
/*尖端指向左侧的三角形,外缘*/
.triright{
z-index: 2;
border: 10px solid #aaaaaa;
border-color: transparent #aaaaaa transparent transparent;
width: 0;
height: 0;
position: absolute;
left:-20px;
top: 5px;
}
复制代码 代码如下:
/*尖端指向左侧的三角形,内部,*/
.trirightinner{ z-index: 3; border: 8px solid #fefab8; border-color: transparent #fefab8 transparent transparent;/*颜色应与提示框的background-color一致*/
width: 0; height: 0; position: absolute; left:-16px; top:7px;}
气泡对话框 鼠标放于此处,会弹出一个气泡对话框。
sharejs.com
[click to edit.]


这是javascript代码:
function showtooltip(e,text){
if(document.all)e = event;
var obj = document.getelementbyid('bubble_tooltip');
var obj2 = document.getelementbyid('bubble_tooltip_content');
obj2.innerhtml = text;
var st = math.max(document.body.scrolltop,document.documentelement.scrolltop);
if(navigator.useragent.tolowercase().indexof('safari')>=0)st=0;
var leftpos = e.clientx + 20; //clientx 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标
if(leftposobj.style.left = leftpos + 'px';
obj.style.top = e.clienty + st + 'px';
obj.style.display = 'block';
fadein(obj,5,100);
}
function hidetooltip()
{
var obj = document.getelementbyid('bubble_tooltip');
//obj.style.display = 'none';
fadeout(obj,5,0);
}
//设置元素透明度,透明度值按ie规则计,即0~100
function setopacity(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
//淡入效果(含淡入到指定透明度)
function fadein(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
elem.style.display = 'block';
setopacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以2递增,即淡入效果
(function(){
setopacity(elem, val);
val += 5;
if (val settimeout(arguments.callee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeout(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 100;
//循环将透明值以5递减,即淡出效果
(function(){
setopacity(elem, val);
val -= 5;
if (val >= opacity) {
settimeout(arguments.callee, speed);
}else if (val //元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
}


该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product