php选择提示框代码,四种提示框代码-PHP教程,PHP应用

这篇文章详细介绍了如何使用HTML5和JavaScript实现图像的过渡效果及提示框功能,包括图象淡入淡出、过渡动画和鼠标悬停提示。通过实例演示了如何创建和控制tooltip,适合前端开发者学习和实践。
摘要由CSDN通过智能技术生成
图像效果演示

/*

舜子制作

made by puterjam

*/

//–初始化变量–

var rt=true;//允许图像过渡

var bt=true;//允许图像淡入淡出

var tw=150;//提示框宽度

var endaction=false;//结束动画

var ns4 = document.layers;

var ns6 = document.getelementbyid && !document.all;

var ie4 = document.all;

offsetx = 0;

offsety = 20;

var tooltipstyle=””;

function inittooltips()

{

if(ns4||ns6||ie4)

{

if(ns4) tooltipstyle = document.tooltiplayer;

else if(ns6) tooltipstyle = document.getelementbyid(“tooltiplayer”).style;

else if(ie4) tooltipstyle = document.all.tooltiplayer.style;

if(ns4) document.captureevents(event.mousemove);

else

{

tooltipstyle.visibility = “visible”;

tooltipstyle.display = “none”;

}

document.onmousemove = movetomouseloc;

}

}

function tooltip(msg, fg, bg)

{

if(tooltip.arguments.length < 1) // hide

{

if(ns4)

{

tooltipstyle.visibility = “hidden”;

}

else

{

//–图象过渡,淡出处理–

if (!endaction) {tooltipstyle.display = “none”;}

if (rt) document.all(“msg1”).filters[1].apply();

if (bt) document.all(“msg1”).filters[2].apply();

document.all(“msg1”).filters[0].opacity=0;

if (rt) document.all(“msg1”).filters[1].play();

if (bt) document.all(“msg1”).filters[2].play();

if (rt){

if (document.all(“msg1”).filters[1].status==1 || document.all(“msg1”).filters[1].status==0){

tooltipstyle.display = “none”;}

}

if (bt){

if (document.all(“msg1”).filters[2].status==1 || document.all(“msg1”).filters[2].status==0){

tooltipstyle.display = “none”;}

}

if (!rt && !bt) tooltipstyle.display = “none”;

//———————-

}

}

else // show

{

if(!fg) fg = “#777777”;

if(!bg) bg = “#eeeeee”;

var content =

“>

” size=”-2″> + msg +

&nbsp\;

;

if(ns4)

{

tooltipstyle.document.write(content);

tooltipstyle.document.close();

tooltipstyle.visibility = “visible”;

}

if(ns6)

{

document.getelementbyid(“tooltiplayer”).innerhtml = content;

tooltipstyle.display=block

}

if(ie4)

{

document.all(“tooltiplayer”).innerhtml=content;

tooltipstyle.display=block

//–图象过渡,淡入处理–

var cssopaction=document.all(“msg1”).filters[0].opacity

document.all(“msg1”).filters[0].opacity=0;

if (rt) document.all(“msg1”).filters[1].apply();

if (bt) document.all(“msg1”).filters[2].apply();

document.all(“msg1”).filters[0].opacity=cssopaction;

if (rt) document.all(“msg1”).filters[1].play();

if (bt) document.all(“msg1”).filters[2].play();

//———————-

}

}

}

function movetomouseloc(e)

{

if(ns4||ns6)

{

x = e.pagex;

y = e.pagey;

}

else

{

x = event.x + document.body.scrollleft;

y = event.y + document.body.scrolltop;

}

tooltipstyle.left = x + offsetx;

tooltipstyle.top = y + offsety;

return true;

}

.trans_msg

{

filter:alpha(opacity=100,enabled=1) revealtrans(duration=.2,transition=1) blendtrans(duration=.2);

}

–>

希望你喜欢这里
^_^)” οnmοuseοut=”tooltip()”>效果1

效果2

你说呢
哈哈, #ffff00, orange)” οnmοuseοut=”tooltip()”>效果3

跑啊!!跑, #ffff00, orange)” οnmοuseοut=”tooltip()”>效果4

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值