分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件;(2)纯CSS制作三角形。
效果这样:
这是html:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>气泡对话框</title>
<script src="/UploadFiles/2021-04-02/myBubbleTooltip.js"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"><style type="text/css">
h1{
font-size: 60px;
margin-top: 0;
font-family: Arial, sans-serif;
text-shadow: 2px 0px 10px #292929;
letter-spacing: 0px;
text-decoration: none;
color: #DDDDDD;
}
div#left{
border: 1px solid #CCCCCC;
width: 200px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0 0 0 20px;
}
div#content{
border: 1px solid #CCCCCC;
width: 600px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0px 20px;
}
div#editor{
border: 1px solid #CCCCCC;
float: left;
width: 300px;
height: 300px;
}
div#test{
border: 2px solid #cccccc;
width: 400px;
height: 400px;
}
.bubble_tooltip_common{
z-index: 1;
color:#333333;
width:150px;
position:absolute;
display:none;
border: 1px solid #AAAAAA;
box-shadow: 0px 0px 10px #AAAAAA;
border-radius: 5px;
padding: 5px 10px;
background-color: #FEFAB8;
}
复制代码 代码如下:
/*尖端指向左侧的三角形,外缘*/
.triRight{
z-index: 2;
border: 10px solid #AAAAAA;
border-color: transparent #AAAAAA transparent transparent;
width: 0;
height: 0;
position: absolute;
left:-20px;
top: 5px;
}
复制代码 代码如下:
<PRE class=html name="code">/*尖端指向左侧的三角形,内部,*/</PRE>.triRightInner{ z-index: 3; border: 8px solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">/*颜色应与提示框的background-color一致*/</SPAN><BR>
width: 0; height: 0; position: absolute; left:-16px; top:7px;}</style></head><body> <div class="bubble_tooltip_common" id="bubble_tooltip"> <label class="triRight"></label> <label class="triRightInner"></label> <span id="bubble_tooltip_content"></span> </div>
<h1>气泡对话框</h1> <div id="left"> <p> <span onmouseover="showToolTip(event,'这是一个提示框。')" onmouseout="hideToolTip()">鼠标放于此处,会弹出一个气泡对话框。</span></p> </div> <div id="content"> <p><a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip.')" onmouseout="hideToolTip()">sharejs.com</a></p>
</div> <div id="editor" contenteditable> [Click to edit.] </div></body></html>
<PRE></PRE>
<P></P>
<P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>这是JavaScript代码:</STRONG></SPAN></P>
<P></P>
<PRE class=javascript name="code">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(leftPos<0)leftPos = 0;
obj.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 <= opacity) {
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) {
//元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
}</PRE><BR>
<BR>
<P></P>
<PRE></PRE>
效果这样:
这是html:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>气泡对话框</title>
<script src="/UploadFiles/2021-04-02/myBubbleTooltip.js"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"><style type="text/css">
h1{
font-size: 60px;
margin-top: 0;
font-family: Arial, sans-serif;
text-shadow: 2px 0px 10px #292929;
letter-spacing: 0px;
text-decoration: none;
color: #DDDDDD;
}
div#left{
border: 1px solid #CCCCCC;
width: 200px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0 0 0 20px;
}
div#content{
border: 1px solid #CCCCCC;
width: 600px;
height: 300px;
background-color: #EEEEEE;
float: left;
margin: 0px 20px;
}
div#editor{
border: 1px solid #CCCCCC;
float: left;
width: 300px;
height: 300px;
}
div#test{
border: 2px solid #cccccc;
width: 400px;
height: 400px;
}
.bubble_tooltip_common{
z-index: 1;
color:#333333;
width:150px;
position:absolute;
display:none;
border: 1px solid #AAAAAA;
box-shadow: 0px 0px 10px #AAAAAA;
border-radius: 5px;
padding: 5px 10px;
background-color: #FEFAB8;
}
复制代码 代码如下:
/*尖端指向左侧的三角形,外缘*/
.triRight{
z-index: 2;
border: 10px solid #AAAAAA;
border-color: transparent #AAAAAA transparent transparent;
width: 0;
height: 0;
position: absolute;
left:-20px;
top: 5px;
}
复制代码 代码如下:
<PRE class=html name="code">/*尖端指向左侧的三角形,内部,*/</PRE>.triRightInner{ z-index: 3; border: 8px solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">/*颜色应与提示框的background-color一致*/</SPAN><BR>
width: 0; height: 0; position: absolute; left:-16px; top:7px;}</style></head><body> <div class="bubble_tooltip_common" id="bubble_tooltip"> <label class="triRight"></label> <label class="triRightInner"></label> <span id="bubble_tooltip_content"></span> </div>
<h1>气泡对话框</h1> <div id="left"> <p> <span onmouseover="showToolTip(event,'这是一个提示框。')" onmouseout="hideToolTip()">鼠标放于此处,会弹出一个气泡对话框。</span></p> </div> <div id="content"> <p><a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip.')" onmouseout="hideToolTip()">sharejs.com</a></p>
</div> <div id="editor" contenteditable> [Click to edit.] </div></body></html>
<PRE></PRE>
<P></P>
<P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>这是JavaScript代码:</STRONG></SPAN></P>
<P></P>
<PRE class=javascript name="code">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(leftPos<0)leftPos = 0;
obj.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 <= opacity) {
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) {
//元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
}</PRE><BR>
<BR>
<P></P>
<PRE></PRE>
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年09月22日
2024年09月22日
- 谷村新司-精选集立体声杂志Vol.4SACDISO
- 《崩坏3》八周年了!琪亚娜等角色送上美好祝福
- 《小朋友齐打交》真人电影预告公开 预计明年推出
- 《萨顶顶-华人首位获格莱美奖提名 怜香伴》[WAV/分轨][420MB]
- 《极致真发烧·HIFI过耳不忘 3CD》[WAV/分轨][1.8GB]
- 《流行HIFI摇滚音乐 摇滚在发烧 2CD》[WAV/分轨][1.3GB]
- 没有才能.2024-我终于也变成人了【华研国际】【FLAC分轨】
- 张国荣.1995-宠爱(2014年K2HD限量版)【滚石】【WAV+CUE】
- 林姗.2009-个人精选集【芮河】【WAV+CUE】
- 魔兽世界地心之战织雾武僧用什么饰品 地心之战织雾武僧饰品推荐
- 瑞鸣《喜马拉雅》[WAV+CUE]
- 【古典音乐】郑京和《华纳录音全集》11CD.2015[FLAC+CUE]
- 群星《经典再现·国语男声》2CD[DTS-WAV]
- 打完猴了!来聊聊你最喜欢哪段故事!
- 玩家分享《黑神话:悟空》大怨种:想痛快玩游戏花了快400块