jquery渐隐渐出的文字提示

2010-03-31 12:27:32 by 【6yang】, 255 visits, 收藏 | 返回

<html>
<head>
<title>jquery渐隐渐出的文字提示6yang</title>
<style type="text/css">
#preview{border:1px solid #999;background:#9900CC;color:#fff;padding:5px;display:none;position:absolute;}
</style>
<script src="http://www.jquery123.com/js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body> <br><br><br>
<a class="preview">请把鼠标放这里查看效果！</a>
<script type="text/javascript">
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
   $("body").append("<div id='preview'>6yang设计这个提示是由jquery完成的哦，很不错吧？</div>");
   $("#preview")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px")
    .fadeIn("slow");
    },
function(){
   $("#preview").fadeOut("fast");
   $("#preview").remove();
    });
$("a.preview").mousemove(function(e){
   $("#preview")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
imagePreview();
});
</script>
<a href="#" title="gggggggggg" class="preview">点我哦</a> <br><a href="#" title="gggggggggg" class="preview">点我哦</a>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=709&cid=3

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 学习技术库

jquery渐隐渐出的文字提示

图片原图