jQuery实现的适用于图片、链接的浮动提示信息框_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java

Rotating Banner / Image-Sequence

HTML

<div id="tooltipList">
<ul>
<li ><a class="tooltip" rel="Glimmer is great! Thanks MIX Online.">I'm a text Tooltip. Hover over me for an example.</a></li>
<li ><a class="tooltipImage" rel="images/100x100_oomph.jpg">And me, I'm an Image Tooltip. Hover over me to see an image.</a></li>
<li ><a class="tooltip" rel="Download Oomph: A Microformats Toolkit at http://visitmix.com"><img src="images/home_sidebar_oomph.jpg" height="90" width="355"></img></a></li>
<li ><a class="tooltipImage" rel="images/lab_experiments_flotzam.jpg"><img src="images/home_sidebar_flotzam.jpg" height="90" width="355"></img></a></li>
</ul>
</div>

CSS

#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
color:#fff;
}

#tooltipList ul
{
margin:0px;
padding:0px;
}

#tooltipList li
{
display:block;
margin-bottom:20px;
}

jQuery

jQuery(function($) {
var timer;
function mouseoverActiontooltip(event)
{
$("body").append("<p id='tooltip'>"+ this.rel + "</p>");
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}

function mouseoutActiontooltip(event)
{
$("#tooltip").remove();
}

function mousemoveActiontooltip(event)
{
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}

function mouseoverActiontooltipImage(event)
{
$("body").append("<p id='tooltip'><img src="+ this.rel + "></img></p>");
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}

function mouseoutActiontooltipImage(event)
{
$("#tooltip").remove();
}

function mousemoveActiontooltipImage(event)
{
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}

$('.tooltip').bind('mouseover', mouseoverActiontooltip);

$('.tooltip').bind('mouseout', mouseoutActiontooltip);

$('.tooltip').bind('mousemove', mousemoveActiontooltip);

$('.tooltipImage').bind('mouseover', mouseoverActiontooltipImage);

$('.tooltipImage').bind('mouseout', mouseoutActiontooltipImage);

$('.tooltipImage').bind('mousemove', mousemoveActiontooltipImage);

});

代码整理:时代Java(NowJava.com) 更 多相关效果,请到时代Java(NowJava.com) 脚本下载栏目

注:此代码仅供学习交流,请勿 用于商业用途。

时代Java(NowJava.com)素材中心整 理。




下载代码说明
X关闭

基于jQuery的实现的适用于图片、链接的浮动提示信息框

jQuery实现的简单浮动信息框效果,效果简单实用,可以用于超级链接信息提示,也可以用于图片信息提示