无为清净楼资源网 Design By www.qnjia.com
鼠标经过出现的提示效果,比title更漂亮,可订制。
JS:
复制代码 代码如下:
//---------------------------tooltip效果 start-----------------------------------
//获取某个html元素的定位
function GetPos(obj){
var pos=new Object();
pos.x=obj.offsetLeft;
pos.y=obj.offsetTop;
while(obj=obj.offsetParent){
pos.x+=obj.offsetLeft;
pos.y+=obj.offsetTop;
}
return pos;
};

//提示工具
var ToolTip={
_tipPanel:null,
Init:function(){
if(null==this._tipPanel){
var tempDiv=document.createElement("div");
document.body.insertBefore(tempDiv, document.body.childNodes[0]);
tempDiv.id="tipPanel";
tempDiv.style.display="none";
tempDiv.style.position="absolute";
tempDiv.style.zIndex="999";
}
},
AttachTip:function(){}, //添加提示绑定
DetachTip:function(){}, //移除提示绑定
ShowTip:function(oTarget){
if($("tipPanel")==null)
return;

/*操作流程
*1、构建新的html片段
*2、设置提示框新位置
*3、显示提示框
*/
//1.
var tempStr=""; //html片段
if(arguments.length>1){
for(var i=1;i<arguments.length;i++){
tempStr+="<p>"+arguments[i]+"</p>";
}
}
$("tipPanel").innerHTML=tempStr;
//2.
var pos=GetPos(oTarget);
$("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px";
$("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px";
//3.
$("tipPanel").style.display="";
},
HideTip:function(){
if($("tipPanel")==null)
return;
$("tipPanel").style.display="none";
}
};

//---------------------------tooltip效果 end-----------------------------------

CSS:
复制代码 代码如下:
#tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;}
#tipPanel p{ margin:0px;}
#tipPanel b{ color:red; font-size:14px;}


HTML调用:
复制代码 代码如下:
<body>
<input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b>日期:</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" />
</body>
<script type="text/javascript">
//initialize tooltip control
ToolTip.Init();
</script>


使用效果:
轻量级 JS ToolTip提示效果
上面的$("id")作用等价于document.getElementById("id")
AttachTip:function(){}, //添加提示绑定
DetachTip:function(){}, //移除提示绑定
这两行,可以用动态绑定事件完成,因为项目里面用不着,所以暂时没加
标签:
JS,ToolTip,提示

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。